<template>
    <div class="topo-properties">
        <template v-if="configObject != null && isLayer == false">
            <div class="tabs-wrap">
                <div class="tab-item" @click="changeTab(0)" :class="{ 'tab-item-active': tabIndex == 0 }">
                    {{ $t('topo.components.topoProperties.038495-0') }}
                </div>
                <div class="tab-item" @click="changeTab(1)" :class="{ 'tab-item-active': tabIndex == 1 }">
                    {{ $t('topo.components.topoProperties.038495-1') }}
                </div>
                <div class="tab-item" @click="changeTab(2)" :class="{ 'tab-item-active': tabIndex == 2 }">
                    {{ $t('topo.components.topoProperties.038495-369') }}
                </div>
            </div>
            <div class="table-wrap">
                <!-- 组件样式 -->
                <div class="table-item" v-show="tabIndex == 0">
                    <el-collapse class="collapse-wrap" v-model="styleCollapseActive">
                        <el-collapse-item :title="$t('topo.components.topoProperties.038495-2')" name="1">
                            <el-form label-width="60px">
                                <el-form-item :label="$t('topo.components.topoProperties.038495-3')">
                                    <el-input-number style="width: 100%" controls-position="right" placeholder="请填写X坐标" v-model="configObject.style.position.x" size="small" />
                                </el-form-item>
                                <el-form-item :label="$t('topo.components.topoProperties.038495-4')">
                                    <el-input-number style="width: 100%" controls-position="right" placeholder="请填写Y坐标" v-model="configObject.style.position.y" size="small" />
                                </el-form-item>
                                <el-form-item :label="$t('topo.components.topoProperties.038495-5')">
                                    <el-input-number style="width: 100%" controls-position="right" placeholder="请填写宽度" v-model="configObject.style.position.w" size="small" />
                                </el-form-item>
                                <el-form-item :label="$t('topo.components.topoProperties.038495-6')">
                                    <el-input-number style="width: 100%" controls-position="right" placeholder="请填写Y坐标" v-model="configObject.style.position.h" size="small" />
                                </el-form-item>
                            </el-form>
                        </el-collapse-item>
                        <el-collapse-item :title="$t('topo.components.topoProperties.038495-7')" name="2">
                            <el-form label-width="77px">
                                <el-form-item :label="$t('topo.components.topoProperties.038495-8')" v-if="configObject.name !== undefined">
                                    <el-input :placeholder="$t('topo.components.topoProperties.038495-9')" v-model="configObject.name" size="small" clearable />
                                </el-form-item>
                                <el-form-item :label="$t('topo.components.topoProperties.038495-10')" v-if="configObject.dataBind.paramMin !== undefined">
                                    <el-input-number style="width: 100%" controls-position="right" :placeholder="$t('topo.components.topoProperties.038495-11')" v-model="configObject.dataBind.paramMin" size="small" />
                                </el-form-item>
                                <el-form-item :label="$t('topo.components.topoProperties.038495-12')" v-if="configObject.dataBind.paramMax !== undefined">
                                    <el-input-number style="width: 100%" controls-position="right" :placeholder="$t('topo.components.topoProperties.038495-13')" v-model="configObject.dataBind.paramMax" size="small" />
                                </el-form-item>
                                <el-form-item :label="$t('topo.components.topoProperties.038495-14')" v-if="configObject.dataBind.interval !== undefined">
                                    <el-input-number style="width: 100%" controls-position="right" :placeholder="$t('topo.components.topoProperties.038495-15')" v-model="configObject.dataBind.interval" size="small" />
                                </el-form-item>
                                <el-form-item :label="$t('topo.components.topoProperties.038495-16')" v-if="configObject.style.weatherModel !== undefined">
                                    <el-select v-model="configObject.style.weatherModel" :placeholder="$t('topo.components.topoProperties.038495-17')" style="width: 100%" size="small">
                                        <el-option :label="$t('topo.components.topoProperties.038495-18')" value="2">
                                            <span style="font-size: 12px">{{ $t('topo.components.topoProperties.038495-18') }}</span>
                                        </el-option>
                                        <el-option :label="$t('topo.components.topoProperties.038495-19')" value="1">
                                            <span style="font-size: 12px">{{ $t('topo.components.topoProperties.038495-19') }}</span>
                                        </el-option>
                                    </el-select>
                                </el-form-item>
                                <el-form-item :label="$t('topo.components.topoProperties.038495-20')" v-if="configObject.style.mapModel !== undefined">
                                    <el-select v-model="configObject.style.mapModel" :placeholder="$t('topo.components.topoProperties.038495-21')" style="width: 100%" size="small">
                                        <el-option :label="$t('topo.components.topoProperties.038495-22')" value="normal">
                                            <span style="font-size: 12px">{{ $t('topo.components.topoProperties.038495-22') }}</span>
                                        </el-option>
                                        <el-option :label="$t('topo.components.topoProperties.038495-23')" value="light">
                                            <span style="font-size: 12px">{{ $t('topo.components.topoProperties.038495-23') }}</span>
                                        </el-option>
                                        <el-option :label="$t('topo.components.topoProperties.038495-24')" value="dark">
                                            <span style="font-size: 12px">{{ $t('topo.components.topoProperties.038495-24') }}</span>
                                        </el-option>
                                        <el-option :label="$t('topo.components.topoProperties.038495-25')" value="redalert">
                                            <span style="font-size: 12px">{{ $t('topo.components.topoProperties.038495-25') }}</span>
                                        </el-option>
                                        <el-option :label="$t('topo.components.topoProperties.038495-26')" value="googlelite">
                                            <span style="font-size: 12px">{{ $t('topo.components.topoProperties.038495-26') }}</span>
                                        </el-option>
                                        <el-option :label="$t('topo.components.topoProperties.038495-27')" value="grassgreen">
                                            <span style="font-size: 12px">{{ $t('topo.components.topoProperties.038495-27') }}</span>
                                        </el-option>
                                        <el-option :label="$t('topo.components.topoProperties.038495-28')" value="midnight">
                                            <span style="font-size: 12px">{{ $t('topo.components.topoProperties.038495-28') }}</span>
                                        </el-option>
                                        <el-option :label="$t('topo.components.topoProperties.038495-29')" value="pink">
                                            <span style="font-size: 12px">{{ $t('topo.components.topoProperties.038495-29') }}</span>
                                        </el-option>
                                        <el-option :label="$t('topo.components.topoProperties.038495-30')" value="darkgreen">
                                            <span style="font-size: 12px">{{ $t('topo.components.topoProperties.038495-30') }}</span>
                                        </el-option>
                                        <el-option :label="$t('topo.components.topoProperties.038495-31')" value="bluish">
                                            <span style="font-size: 12px">{{ $t('topo.components.topoProperties.038495-31') }}</span>
                                        </el-option>
                                        <el-option :label="$t('topo.components.topoProperties.038495-32')" value="grayscale">
                                            <span style="font-size: 12px">{{ $t('topo.components.topoProperties.038495-32') }}</span>
                                        </el-option>
                                        <el-option :label="$t('topo.components.topoProperties.038495-33')" value="hardedge">
                                            <span style="font-size: 12px">{{ $t('topo.components.topoProperties.038495-33') }}</span>
                                        </el-option>
                                    </el-select>
                                </el-form-item>
                                <el-form-item :label="$t('topo.components.topoProperties.038495-34')">
                                    <el-input-number style="width: 100%" controls-position="right" :placeholder="$t('topo.components.topoProperties.038495-35')" v-model="configObject.style.zIndex" size="small" />
                                </el-form-item>
                                <el-form-item :label="$t('topo.components.topoProperties.038495-36')" v-if="isLayer === false && configObject.type !== 'map'">
                                    <div style="height: 36px">
                                        <el-color-picker v-model="configObject.style.backColor" show-alpha :predefine="predefineColors" color-format="hex" />
                                    </div>
                                </el-form-item>
                                <template v-if="isLayer === false && configObject.type !== 'flow-bar' && configObject.type !== 'flow-bar-dynamic' && configObject.type !== 'map'">
                                    <el-form-item :label="$t('topo.components.topoProperties.038495-37')">
                                        <el-input-number style="width: 100%" controls-position="right" placeholder="0.5" v-model="configObject.style.opacity" size="small" />
                                    </el-form-item>
                                    <el-form-item :label="$t('topo.components.topoProperties.038495-38')">
                                        <el-input-number style="width: 100%" controls-position="right" placeholder="10" v-model="configObject.style.borderRadius" size="small" />
                                    </el-form-item>
                                    <el-form-item :label="$t('topo.components.topoProperties.038495-39')">
                                        <el-input-number style="width: 100%" controls-position="right" placeholder="20" v-model="configObject.style.boxShadowWidth" size="small" />
                                    </el-form-item>
                                    <el-form-item :label="$t('topo.components.topoProperties.038495-40')">
                                        <div style="height: 36px">
                                            <el-color-picker v-model="configObject.style.boxShadowColor" show-alpha :predefine="predefineColors" color-format="hex" />
                                        </div>
                                    </el-form-item>
                                </template>
                                <el-form-item :label="$t('topo.components.topoProperties.038495-41')" v-if="configObject.componentShow && configObject.componentShow.indexOf('设备统计') > -1">
                                    <el-select v-model="configObject.style.pieType" :placeholder="$t('topo.components.topoProperties.038495-43')" style="width: 100%" size="small">
                                        <el-option :label="$t('topo.components.topoProperties.038495-44')" value="设备状态">
                                            <span style="font-size: 12px">{{ $t('topo.components.topoProperties.038495-44') }}</span>
                                        </el-option>
                                        <el-option :label="$t('topo.components.topoProperties.038495-45')" value="报警状态">
                                            <span style="font-size: 12px">{{ $t('topo.components.topoProperties.038495-45') }}</span>
                                        </el-option>
                                        <!-- <el-option label="工单状态" value="工单状态">
                                            <span style="font-size: 12px">工单状态</span>
                                        </el-option> -->
                                    </el-select>
                                </el-form-item>
                                <el-form-item :label="$t('topo.components.topoProperties.038495-46')" v-if="configObject.style.url !== undefined && configObject.style.url !== null">
                                    <el-button size="mini" @click="handleGalleryClick('图片路径')">{{ $t('topo.components.topoProperties.038495-48') }}</el-button>
                                </el-form-item>
                                <el-form-item :label="$t('topo.components.topoProperties.038495-49')" v-if="configObject.style.text !== undefined">
                                    <el-input :placeholder="$t('topo.components.topoProperties.038495-50')" v-model="configObject.style.text" size="small" clearable />
                                </el-form-item>
                                <el-form-item :label="$t('topo.components.topoProperties.038495-51')" v-if="configObject.style.textAlign !== undefined">
                                    <el-select v-model="configObject.style.textAlign" :placeholder="$t('topo.components.topoProperties.038495-52')" style="width: 100%" size="small">
                                        <el-option :label="$t('topo.components.topoProperties.038495-53')" value="left">
                                            <span style="font-size: 12px">{{ $t('topo.components.topoProperties.038495-53') }}</span>
                                        </el-option>
                                        <el-option :label="$t('topo.components.topoProperties.038495-54')" value="center">
                                            <span style="font-size: 12px">{{ $t('topo.components.topoProperties.038495-54') }}</span>
                                        </el-option>
                                        <el-option :label="$t('topo.components.topoProperties.038495-55')" value="right">
                                            <span style="font-size: 12px">{{ $t('topo.components.topoProperties.038495-55') }}</span>
                                        </el-option>
                                    </el-select>
                                </el-form-item>
                                <el-form-item :label="$t('topo.components.topoProperties.038495-56')" v-if="configObject.style.fontFamily !== undefined">
                                    <el-select v-model="configObject.style.fontFamily" :placeholder="$t('topo.components.topoProperties.038495-57')" style="width: 100%" size="small">
                                        <el-option :label="item" :value="item" v-for="item in fontFamilyOptions" :key="item">
                                            <span style="font-size: 12px">{{ item }}</span>
                                        </el-option>
                                    </el-select>
                                </el-form-item>
                                <el-form-item :label="$t('topo.components.topoProperties.038495-308')" v-if="configObject.style.fontStyle !== undefined">
                                    <el-select v-model="configObject.style.fontStyle" :placeholder="$t('topo.components.topoProperties.038495-309')" style="width: 100%" size="small">
                                        <el-option :label="item.text" :value="item.id" v-for="item in fontStyleOptions" :key="item.id">
                                            <span style="font-size: 12px">{{ item.text }}</span>
                                        </el-option>
                                    </el-select>
                                </el-form-item>
                                <el-form-item :label="$t('topo.components.topoProperties.038495-310')" v-if="configObject.style.fontWeight !== undefined">
                                    <el-select v-model="configObject.style.fontWeight" :placeholder="$t('topo.components.topoProperties.038495-311')" style="width: 100%" size="small">
                                        <el-option :label="item.text" :value="item.id" v-for="item in fontWeightOptions" :key="item.id">
                                            <span style="font-size: 12px">{{ item.text }}</span>
                                        </el-option>
                                    </el-select>
                                </el-form-item>
                                <el-form-item :label="$t('topo.components.topoProperties.038495-58')" v-if="configObject.style.fontSize !== undefined">
                                    <el-input-number style="width: 100%" controls-position="right" :placeholder="$t('topo.components.topoProperties.038495-59')" v-model="configObject.style.fontSize" size="small" />
                                </el-form-item>
                                <el-form-item :label="$t('topo.components.topoProperties.038495-60')" v-if="configObject.componentShow && configObject.componentShow.indexOf('滤镜渲染') > -1">
                                    <el-radio-group v-model="configObject.style.isFilter" size="small">
                                        <el-radio :label="true">{{ $t('topo.components.topoProperties.038495-62') }}</el-radio>
                                        <el-radio :label="false">{{ $t('topo.components.topoProperties.038495-63') }}</el-radio>
                                    </el-radio-group>
                                </el-form-item>
                                <el-form-item :label="$t('topo.components.topoProperties.038495-64')" v-if="configObject.componentShow && configObject.componentShow.indexOf('组件颜色') > -1">
                                    <div style="height: 36px">
                                        <el-color-picker v-model="configObject.style.foreColor" show-alpha :predefine="predefineColors" color-format="hex" />
                                    </div>
                                </el-form-item>
                                <el-form-item :label="$t('topo.components.topoProperties.038495-312')" v-if="configObject.style.dataType !== undefined">
                                    <el-select v-model="configObject.style.dataType" :placeholder="$t('topo.components.topoProperties.038495-313')" style="width: 100%" size="small">
                                        <el-option :label="item.text" :value="item.value" v-for="item in dataTypeOptions" :key="item.id">
                                            <span style="font-size: 12px">{{ item.text }}</span>
                                        </el-option>
                                    </el-select>
                                </el-form-item>
                                <el-form-item :label="$t('topo.components.topoProperties.038495-314')" v-if="configObject.style.decimalDigits !== undefined && configObject.style.dataType === 10">
                                    <el-input-number style="width: 100%" controls-position="right" :placeholder="$t('topo.components.topoProperties.038495-315')" v-model="configObject.style.decimalDigits" size="small" />
                                </el-form-item>
                                <el-form-item :label="$t('topo.components.topoProperties.038495-65')">
                                    <el-select v-model="configObject.style.visible" :placeholder="$t('topo.components.topoProperties.038495-66')" style="width: 100%" size="small">
                                        <el-option :label="$t('topo.components.topoProperties.038495-67')" :value="true">
                                            <span style="font-size: 12px">{{ $t('topo.components.topoProperties.038495-67') }}</span>
                                        </el-option>
                                        <el-option :label="$t('topo.components.topoProperties.038495-68')" :value="false">
                                            <span style="font-size: 12px">{{ $t('topo.components.topoProperties.038495-68') }}</span>
                                        </el-option>
                                    </el-select>
                                </el-form-item>
                                <el-form-item :label="$t('topo.components.topoProperties.038495-70')" v-if="configObject.componentShow && configObject.componentShow.indexOf('自定义echarts') > -1">
                                    <el-button type="text" icon="el-icon-edit" size="small" @click="handleEchartClick">{{ $t('edit') }}</el-button>
                                </el-form-item>
                                <el-form-item :label="$t('topo.components.topoProperties.038495-71')" v-if="configObject.componentShow && configObject.componentShow.indexOf('地图文件') > -1">
                                    <el-select v-model="configObject.dataBind.mapAddress" :placeholder="$t('topo.components.topoProperties.038495-73')" filterable style="width: 100%" size="small">
                                        <el-option :label="$t('topo.components.topoProperties.038495-74')" value="安徽">
                                            <span style="font-size: 12px">{{ $t('topo.components.topoProperties.038495-74') }}</span>
                                        </el-option>
                                        <el-option :label="$t('topo.components.topoProperties.038495-75')" value="澳门">
                                            <span style="font-size: 12px">{{ $t('topo.components.topoProperties.038495-75') }}</span>
                                        </el-option>
                                        <el-option :label="$t('topo.components.topoProperties.038495-76')" value="北京">
                                            <span style="font-size: 12px">{{ $t('topo.components.topoProperties.038495-76') }}</span>
                                        </el-option>
                                        <el-option :label="$t('topo.components.topoProperties.038495-77')" value="重庆">
                                            <span style="font-size: 12px">{{ $t('topo.components.topoProperties.038495-77') }}</span>
                                        </el-option>
                                        <el-option :label="$t('topo.components.topoProperties.038495-78')" value="福建">
                                            <span style="font-size: 12px">{{ $t('topo.components.topoProperties.038495-78') }}</span>
                                        </el-option>
                                        <el-option :label="$t('topo.components.topoProperties.038495-79')" value="甘肃">
                                            <span style="font-size: 12px">{{ $t('topo.components.topoProperties.038495-79') }}</span>
                                        </el-option>
                                        <el-option :label="$t('topo.components.topoProperties.038495-80')" value="广东">
                                            <span style="font-size: 12px">{{ $t('topo.components.topoProperties.038495-80') }}</span>
                                        </el-option>
                                        <el-option :label="$t('topo.components.topoProperties.038495-81')" value="广西">
                                            <span style="font-size: 12px">{{ $t('topo.components.topoProperties.038495-81') }}</span>
                                        </el-option>
                                        <el-option :label="$t('topo.components.topoProperties.038495-82')" value="贵州">
                                            <span style="font-size: 12px">{{ $t('topo.components.topoProperties.038495-82') }}</span>
                                        </el-option>
                                        <el-option :label="$t('topo.components.topoProperties.038495-83')" value="海南">
                                            <span style="font-size: 12px">{{ $t('topo.components.topoProperties.038495-83') }}</span>
                                        </el-option>
                                        <el-option :label="$t('topo.components.topoProperties.038495-84')" value="河北">
                                            <span style="font-size: 12px">{{ $t('topo.components.topoProperties.038495-84') }}</span>
                                        </el-option>
                                        <el-option :label="$t('topo.components.topoProperties.038495-85')" value="黑龙江">
                                            <span style="font-size: 12px">{{ $t('topo.components.topoProperties.038495-85') }}</span>
                                        </el-option>
                                        <el-option :label="$t('topo.components.topoProperties.038495-86')" value="河南">
                                            <span style="font-size: 12px">{{ $t('topo.components.topoProperties.038495-86') }}</span>
                                        </el-option>
                                        <el-option :label="$t('topo.components.topoProperties.038495-87')" value="湖北">
                                            <span style="font-size: 12px">{{ $t('topo.components.topoProperties.038495-87') }}</span>
                                        </el-option>
                                        <el-option :label="$t('topo.components.topoProperties.038495-88')" value="湖南">
                                            <span style="font-size: 12px">{{ $t('topo.components.topoProperties.038495-88') }}</span>
                                        </el-option>
                                        <el-option :label="$t('topo.components.topoProperties.038495-89')" value="江苏">
                                            <span style="font-size: 12px">{{ $t('topo.components.topoProperties.038495-89') }}</span>
                                        </el-option>
                                        <el-option :label="$t('topo.components.topoProperties.038495-90')" value="江西">
                                            <span style="font-size: 12px">{{ $t('topo.components.topoProperties.038495-90') }}</span>
                                        </el-option>
                                        <el-option :label="$t('topo.components.topoProperties.038495-91')" value="吉林">
                                            <span style="font-size: 12px">{{ $t('topo.components.topoProperties.038495-91') }}</span>
                                        </el-option>
                                        <el-option :label="$t('topo.components.topoProperties.038495-92')" value="辽宁">
                                            <span style="font-size: 12px">{{ $t('topo.components.topoProperties.038495-92') }}</span>
                                        </el-option>
                                        <el-option :label="$t('topo.components.topoProperties.038495-93')" value="内蒙古">
                                            <span style="font-size: 12px">{{ $t('topo.components.topoProperties.038495-93') }}</span>
                                        </el-option>
                                        <el-option :label="$t('topo.components.topoProperties.038495-94')" value="宁夏">
                                            <span style="font-size: 12px">{{ $t('topo.components.topoProperties.038495-94') }}</span>
                                        </el-option>
                                        <el-option :label="$t('topo.components.topoProperties.038495-95')" value="青海">
                                            <span style="font-size: 12px">{{ $t('topo.components.topoProperties.038495-95') }}</span>
                                        </el-option>
                                        <el-option :label="$t('topo.components.topoProperties.038495-96')" value="山东">
                                            <span style="font-size: 12px">{{ $t('topo.components.topoProperties.038495-96') }}</span>
                                        </el-option>
                                        <el-option :label="$t('topo.components.topoProperties.038495-97')" value="上海">
                                            <span style="font-size: 12px">{{ $t('topo.components.topoProperties.038495-97') }}</span>
                                        </el-option>
                                        <el-option :label="$t('topo.components.topoProperties.038495-98')" value="山西">
                                            <span style="font-size: 12px">{{ $t('topo.components.topoProperties.038495-98') }}</span>
                                        </el-option>
                                        <el-option :label="$t('topo.components.topoProperties.038495-99')" value="四川">
                                            <span style="font-size: 12px">{{ $t('topo.components.topoProperties.038495-99') }}</span>
                                        </el-option>
                                        <el-option :label="$t('topo.components.topoProperties.038495-100')" value="台湾">
                                            <span style="font-size: 12px">{{ $t('topo.components.topoProperties.038495-100') }}</span>
                                        </el-option>
                                        <el-option :label="$t('topo.components.topoProperties.038495-101')" value="天津">
                                            <span style="font-size: 12px">{{ $t('topo.components.topoProperties.038495-101') }}</span>
                                        </el-option>
                                        <el-option :label="$t('topo.components.topoProperties.038495-102')" value="香港">
                                            <span style="font-size: 12px">{{ $t('topo.components.topoProperties.038495-102') }}</span>
                                        </el-option>
                                        <el-option :label="$t('topo.components.topoProperties.038495-103')" value="新疆">
                                            <span style="font-size: 12px">{{ $t('topo.components.topoProperties.038495-103') }}</span>
                                        </el-option>
                                        <el-option :label="$t('topo.components.topoProperties.038495-104')" value="西藏">
                                            <span style="font-size: 12px">{{ $t('topo.components.topoProperties.038495-104') }}</span>
                                        </el-option>
                                        <el-option :label="$t('topo.components.topoProperties.038495-105')" value="云南">
                                            <span style="font-size: 12px">{{ $t('topo.components.topoProperties.038495-105') }}</span>
                                        </el-option>
                                        <el-option :label="$t('topo.components.topoProperties.038495-106')" value="浙江">
                                            <span style="font-size: 12px">{{ $t('topo.components.topoProperties.038495-106') }}</span>
                                        </el-option>
                                        <el-option :label="$t('topo.components.topoProperties.038495-107')" value="自定义">
                                            <span style="font-size: 12px">{{ $t('topo.components.topoProperties.038495-107') }}</span>
                                        </el-option>
                                    </el-select>
                                </el-form-item>
                                <el-form-item :label="$t('topo.components.topoProperties.038495-108')" v-if="configObject.dataBind.mapAddress == '自定义'">
                                    <el-input :placeholder="$t('topo.components.topoProperties.038495-109')" v-model="configObject.dataBind.mapUrl" size="small" />
                                </el-form-item>
                                <el-form-item :label="$t('topo.components.topoProperties.038495-111')" v-if="configObject.componentShow && configObject.componentShow.indexOf('悬浮提示') > -1">
                                    <el-radio-group v-model="configObject.style.tipDIs" size="small">
                                        <el-radio :label="true">{{ $t('topo.components.topoProperties.038495-258') }}</el-radio>
                                        <el-radio :label="false">{{ $t('close') }}</el-radio>
                                    </el-radio-group>
                                </el-form-item>
                                <el-form-item :label="$t('topo.components.topoProperties.038495-112')" v-if="configObject.componentShow && configObject.componentShow.indexOf('悬浮提示') > -1">
                                    <el-radio-group v-model="configObject.style.tipShow" size="small">
                                        <el-radio :label="true">{{ $t('topo.components.topoProperties.038495-113') }}</el-radio>
                                        <el-radio :label="false">{{ $t('topo.components.topoProperties.038495-114') }}</el-radio>
                                    </el-radio-group>
                                </el-form-item>
                                <el-form-item :label="$t('topo.components.topoProperties.038495-115')" v-if="configObject.componentShow && configObject.componentShow.indexOf('悬浮提示') > -1">
                                    <el-select v-model="configObject.style.placement" :placeholder="$t('topo.components.topoProperties.038495-116')" style="width: 100%" size="small">
                                        <el-option :label="$t('topo.components.topoProperties.038495-117')" value="top">
                                            <span style="font-size: 12px">{{ $t('topo.components.topoProperties.038495-117') }}</span>
                                        </el-option>
                                        <el-option :label="$t('topo.components.topoProperties.038495-118')" value="top-start">
                                            <span style="font-size: 12px">{{ $t('topo.components.topoProperties.038495-118') }}</span>
                                        </el-option>
                                        <el-option :label="$t('topo.components.topoProperties.038495-119')" value="top-end">
                                            <span style="font-size: 12px">{{ $t('topo.components.topoProperties.038495-119') }}</span>
                                        </el-option>
                                        <el-option :label="$t('topo.components.topoProperties.038495-120')" value="bottom">
                                            <span style="font-size: 12px">{{ $t('topo.components.topoProperties.038495-120') }}</span>
                                        </el-option>
                                        <el-option :label="$t('topo.components.topoProperties.038495-121')" value="bottom-start">
                                            <span style="font-size: 12px">{{ $t('topo.components.topoProperties.038495-121') }}</span>
                                        </el-option>
                                        <el-option :label="$t('topo.components.topoProperties.038495-122')" value="bottom-end">
                                            <span style="font-size: 12px">{{ $t('topo.components.topoProperties.038495-122') }}</span>
                                        </el-option>
                                        <el-option :label="$t('topo.components.topoProperties.038495-123')" value="left">
                                            <span style="font-size: 12px">{{ $t('topo.components.topoProperties.038495-123') }}</span>
                                        </el-option>
                                        <el-option :label="$t('topo.components.topoProperties.038495-124')" value="left-start">
                                            <span style="font-size: 12px">{{ $t('topo.components.topoProperties.038495-124') }}</span>
                                        </el-option>
                                        <el-option :label="$t('topo.components.topoProperties.038495-125')" value="left-end">
                                            <span style="font-size: 12px">{{ $t('topo.components.topoProperties.038495-125') }}</span>
                                        </el-option>
                                        <el-option :label="$t('topo.components.topoProperties.038495-126')" value="right">
                                            <span style="font-size: 12px">{{ $t('topo.components.topoProperties.038495-126') }}</span>
                                        </el-option>
                                        <el-option :label="$t('topo.components.topoProperties.038495-127')" value="right-start">
                                            <span style="font-size: 12px">{{ $t('topo.components.topoProperties.038495-127') }}</span>
                                        </el-option>
                                        <el-option :label="$t('topo.components.topoProperties.038495-128')" value="right-end">
                                            <span style="font-size: 12px">{{ $t('topo.components.topoProperties.038495-128') }}</span>
                                        </el-option>
                                    </el-select>
                                </el-form-item>
                                <el-form-item label="悬浮样式" v-if="configObject.componentShow && configObject.componentShow.indexOf('悬浮提示') > -1">
                                    <el-select v-model="configObject.style.effect" placeholder="请选择悬浮样式" style="width: 100%" size="small">
                                        <el-option :label="$t('topo.components.topoProperties.038495-129')" value="dark">
                                            <span style="font-size: 12px">{{ $t('topo.components.topoProperties.038495-129') }}</span>
                                        </el-option>
                                        <el-option :label="$t('topo.components.topoProperties.038495-130')" value="light">
                                            <span style="font-size: 12px">{{ $t('topo.components.topoProperties.038495-130') }}</span>
                                        </el-option>
                                    </el-select>
                                </el-form-item>
                                <el-form-item :label="$t('topo.components.topoProperties.038495-131')" v-if="configObject.componentShow && configObject.componentShow.indexOf('数统计') > -1">
                                    <el-select v-model="configObject.dataBind.staticType" :placeholder="$t('topo.components.topoProperties.038495-132')" style="width: 100%" size="small">
                                        <el-option v-for="item in paramNameList" :key="item" :label="item" :value="item">
                                            <span style="font-size: 12px">{{ item }}</span>
                                        </el-option>
                                    </el-select>
                                </el-form-item>
                                <el-form-item :label="$t('topo.components.topoProperties.038495-133')" v-if="configObject.style.lineWidth">
                                    <el-input-number style="width: 100%" controls-position="right" :placeholder="$t('topo.components.topoProperties.038495-134')" v-model="configObject.style.lineWidth" size="small" />
                                </el-form-item>
                                <!-- 新版水流样式设置开始 -->
                                <template v-if="configObject.componentShow && configObject.componentShow.indexOf('水流') > -1">
                                    <el-form-item :label="$t('topo.components.topoProperties.038495-135')">
                                        <el-input-number
                                            style="width: 100%"
                                            controls-position="right"
                                            :placeholder="$t('topo.components.topoProperties.038495-136')"
                                            v-model="configObject.style.lineHeight"
                                            size="small"
                                        />
                                    </el-form-item>
                                    <el-form-item :label="$t('topo.components.topoProperties.038495-137')">
                                        <el-input-number
                                            style="width: 100%"
                                            controls-position="right"
                                            :placeholder="$t('topo.components.topoProperties.038495-138')"
                                            v-model="configObject.style.lineInterval"
                                            size="small"
                                        />
                                    </el-form-item>
                                    <el-form-item :label="$t('topo.components.topoProperties.038495-139')">
                                        <el-select v-model="configObject.style.lineType" :placeholder="$t('topo.components.topoProperties.038495-140')" style="width: 100%" size="small">
                                            <el-option :label="$t('topo.components.topoProperties.038495-141')" value="butt">
                                                <span style="font-size: 12px">{{ $t('topo.components.topoProperties.038495-141') }}</span>
                                            </el-option>
                                            <el-option :label="$t('topo.components.topoProperties.038495-142')" value="round">
                                                <span style="font-size: 12px">{{ $t('topo.components.topoProperties.038495-142') }}</span>
                                            </el-option>
                                        </el-select>
                                    </el-form-item>
                                    <el-form-item :label="$t('topo.components.topoProperties.038495-143')">
                                        <el-select v-model="configObject.style.animations" :placeholder="$t('topo.components.topoProperties.038495-144')" style="width: 100%" size="small">
                                            <el-option :label="$t('topo.components.topoProperties.038495-145')" value="正向">
                                                <span style="font-size: 12px">{{ $t('topo.components.topoProperties.038495-145') }}</span>
                                            </el-option>
                                            <el-option :label="$t('topo.components.topoProperties.038495-146')" value="反向">
                                                <span style="font-size: 12px">{{ $t('topo.components.topoProperties.038495-146') }}</span>
                                            </el-option>
                                            <el-option :label="$t('topo.components.topoProperties.038495-147')" value="静止">
                                                <span style="font-size: 12px">{{ $t('topo.components.topoProperties.038495-147') }}</span>
                                            </el-option>
                                        </el-select>
                                    </el-form-item>
                                    <el-form-item :label="$t('topo.components.topoProperties.038495-148')">
                                        <el-select v-model="configObject.style.speed" :placeholder="$t('topo.components.topoProperties.038495-148')" style="width: 100%" size="small">
                                            <el-option :label="$t('topo.components.topoProperties.038495-149')" value="快">
                                                <span style="font-size: 12px">{{ $t('topo.components.topoProperties.038495-149') }}</span>
                                            </el-option>
                                            <el-option :label="$t('topo.components.topoProperties.038495-150')" value="中">
                                                <span style="font-size: 12px">{{ $t('topo.components.topoProperties.038495-150') }}</span>
                                            </el-option>
                                            <el-option :label="$t('topo.components.topoProperties.038495-151')" value="慢">
                                                <span style="font-size: 12px">{{ $t('topo.components.topoProperties.038495-151') }}</span>
                                            </el-option>
                                        </el-select>
                                    </el-form-item>
                                    <el-form-item :label="$t('topo.components.topoProperties.038495-152')">
                                        <el-input-number
                                            style="width: 100%"
                                            controls-position="right"
                                            :placeholder="$t('topo.components.topoProperties.038495-153')"
                                            v-model="configObject.style.anchorPointNum"
                                            size="small"
                                        />
                                    </el-form-item>
                                </template>
                                <!-- 水流样式设置结束 -->
                                <!-- 水球图样式 -->
                                <el-form-item :label="$t('topo.components.topoProperties.038495-154')" v-if="configObject.style.waterShape">
                                    <el-select v-model="configObject.style.waterShape" :placeholder="$t('topo.components.topoProperties.038495-155')" style="width: 100%" size="small">
                                        <el-option :label="$t('topo.components.topoProperties.038495-156')" value="container">
                                            <span style="font-size: 12px">{{ $t('topo.components.topoProperties.038495-156') }}</span>
                                        </el-option>
                                        <el-option :label="$t('topo.components.topoProperties.038495-157')" value="circle">
                                            <span style="font-size: 12px">{{ $t('topo.components.topoProperties.038495-157') }}</span>
                                        </el-option>
                                        <el-option :label="$t('topo.components.topoProperties.038495-158')" value="rect">
                                            <span style="font-size: 12px">{{ $t('topo.components.topoProperties.038495-158') }}</span>
                                        </el-option>
                                        <el-option :label="$t('topo.components.topoProperties.038495-159')" value="roundRect">
                                            <span style="font-size: 12px">{{ $t('topo.components.topoProperties.038495-159') }}</span>
                                        </el-option>
                                        <el-option :label="$t('topo.components.topoProperties.038495-160')" value="triangle">
                                            <span style="font-size: 12px">{{ $t('topo.components.topoProperties.038495-160') }}</span>
                                        </el-option>
                                        <el-option :label="$t('topo.components.topoProperties.038495-161')" value="diamond">
                                            <span style="font-size: 12px">{{ $t('topo.components.topoProperties.038495-161') }}</span>
                                        </el-option>
                                        <el-option :label="$t('topo.components.topoProperties.038495-162')" value="pin">
                                            <span style="font-size: 12px">{{ $t('topo.components.topoProperties.038495-162') }}</span>
                                        </el-option>
                                        <el-option :label="$t('topo.components.topoProperties.038495-163')" value="arrow">
                                            <span style="font-size: 12px">{{ $t('topo.components.topoProperties.038495-163') }}</span>
                                        </el-option>
                                        <el-option :label="$t('topo.components.topoProperties.038495-334')" value="convex">
                                            <span style="font-size: 12px">{{ $t('topo.components.topoProperties.038495-334') }}</span>
                                        </el-option>
                                    </el-select>
                                </el-form-item>
                                <el-form-item :label="$t('topo.components.topoProperties.038495-164')" v-if="configObject.style.waterShape">
                                    <div style="height: 36px">
                                        <el-color-picker v-model="configObject.style.waterColor" show-alpha :predefine="predefineColors" />
                                    </div>
                                </el-form-item>
                                <el-form-item :label="$t('topo.components.topoProperties.038495-335')" v-if="configObject.style.waterLabel !== undefined">
                                    <el-select v-model="configObject.style.waterLabel" :placeholder="$t('topo.components.topoProperties.038495-336')" style="width: 100%" size="small">
                                        <el-option :label="$t('topo.components.topoProperties.038495-67')" :value="true">
                                            <span style="font-size: 12px">{{ $t('topo.components.topoProperties.038495-67') }}</span>
                                        </el-option>
                                        <el-option :label="$t('topo.components.topoProperties.038495-68')" :value="false">
                                            <span style="font-size: 12px">{{ $t('topo.components.topoProperties.038495-68') }}</span>
                                        </el-option>
                                    </el-select>
                                </el-form-item>
                                <el-form-item :label="$t('topo.components.topoProperties.038495-58')" v-if="configObject.style.waterFontSize !== undefined">
                                    <el-input-number style="width: 100%" controls-position="right" :placeholder="$t('topo.components.topoProperties.038495-59')" v-model="configObject.style.waterFontSize" size="small" />
                                </el-form-item>
                                <el-form-item :label="$t('topo.components.topoProperties.038495-165')" v-if="configObject.style.waterBorderWidth !== undefined">
                                    <el-input-number
                                        style="width: 100%"
                                        controls-position="right"
                                        :placeholder="$t('topo.components.topoProperties.038495-166')"
                                        v-model="configObject.style.waterBorderWidth"
                                        size="small"
                                    />
                                </el-form-item>
                                <el-form-item :label="$t('topo.components.topoProperties.038495-167')" v-if="configObject.style.waterBorderColor !== undefined">
                                    <div style="height: 36px">
                                        <el-color-picker v-model="configObject.style.waterBorderColor" show-alpha :predefine="predefineColors" color-format="hex" />
                                    </div>
                                </el-form-item>
                                <el-form-item :label="$t('topo.components.topoProperties.038495-168')" v-if="configObject.style.titleFontSize !== undefined">
                                    <div style="height: 36px">
                                        <el-input-number
                                            style="width: 100%"
                                            controls-position="right"
                                            :placeholder="$t('topo.components.topoProperties.038495-329')"
                                            v-model="configObject.style.titleFontSize"
                                            size="small"
                                        />
                                    </div>
                                </el-form-item>
                                <el-form-item :label="$t('topo.components.topoProperties.038495-330')" v-if="configObject.style.titleVisible !== undefined">
                                    <el-select v-model="configObject.style.titleVisible" :placeholder="$t('topo.components.topoProperties.038495-331')" style="width: 100%" size="small">
                                        <el-option :label="$t('topo.components.topoProperties.038495-332')" :value="true">
                                            <span style="font-size: 12px">{{ $t('topo.components.topoProperties.038495-332') }}</span>
                                        </el-option>
                                        <el-option :label="$t('topo.components.topoProperties.038495-333')" :value="false">
                                            <span style="font-size: 12px">{{ $t('topo.components.topoProperties.038495-333') }}</span>
                                        </el-option>
                                    </el-select>
                                </el-form-item>
                                <el-form-item :label="$t('topo.components.topoProperties.038495-170')" v-if="configObject.style.rowNum !== undefined && configObject.componentShow.indexOf('轮播表') === -1">
                                    <el-input-number style="width: 100%" controls-position="right" :placeholder="$t('topo.components.topoProperties.038495-171')" v-model="configObject.style.rowNum" size="small" />
                                </el-form-item>
                                <el-form-item label="列数" v-if="configObject.style.columnNum !== undefined">
                                    <el-input-number style="width: 100%" controls-position="right" placeholder="请填写行数" v-model="configObject.style.columnNum" size="small" />
                                </el-form-item>
                            </el-form>
                        </el-collapse-item>
                        <!-- 滚动表格开始 -->
                        <el-collapse-item :title="$t('topo.components.topoProperties.038495-169')" name="3" v-if="configObject.componentShow && configObject.componentShow.indexOf('轮播表') > -1">
                            <el-form label-width="98px">
                                <el-form-item :label="$t('topo.components.topoProperties.038495-170')">
                                    <el-input-number style="width: 100%" controls-position="right" :placeholder="$t('topo.components.topoProperties.038495-171')" v-model="configObject.style.rowNum" size="small" />
                                </el-form-item>
                                <el-form-item :label="$t('topo.components.topoProperties.038495-172')">
                                    <div style="height: 36px">
                                        <el-color-picker v-model="configObject.style.foreColor" show-alpha :predefine="predefineColors" color-format="hex" />
                                    </div>
                                </el-form-item>
                                <el-form-item :label="$t('topo.components.topoProperties.038495-173')">
                                    <div style="height: 36px">
                                        <el-color-picker v-model="configObject.style.headerBGC" show-alpha :predefine="predefineColors" color-format="hex" />
                                    </div>
                                </el-form-item>
                                <el-form-item :label="$t('topo.components.topoProperties.038495-174')">
                                    <div style="height: 36px">
                                        <el-color-picker v-model="configObject.style.oddRowBGC" show-alpha :predefine="predefineColors" color-format="hex" />
                                    </div>
                                </el-form-item>
                                <el-form-item :label="$t('topo.components.topoProperties.038495-175')">
                                    <div style="height: 36px">
                                        <el-color-picker v-model="configObject.style.evenRowBGC" show-alpha :predefine="predefineColors" color-format="hex" />
                                    </div>
                                </el-form-item>
                                <el-form-item :label="$t('topo.components.topoProperties.038495-176')">
                                    <el-input-number
                                        style="width: 100%"
                                        controls-position="right"
                                        :placeholder="$t('topo.components.topoProperties.038495-177')"
                                        v-model="configObject.style.waitTime"
                                        size="small"
                                        :min="1000"
                                    />
                                </el-form-item>
                                <el-form-item :label="$t('topo.components.topoProperties.038495-178')">
                                    <el-input-number style="width: 100%" controls-position="right" :placeholder="$t('topo.components.topoProperties.038495-179')" v-model="configObject.style.headerHeight" size="small" />
                                </el-form-item>
                                <el-form-item :label="$t('topo.components.topoProperties.038495-180')">
                                    <el-input-number style="width: 100%" controls-position="right" :placeholder="$t('topo.components.topoProperties.038495-181')" v-model="configObject.style.columnWidth" size="small" />
                                </el-form-item>
                                <el-form-item :label="$t('topo.components.topoProperties.038495-182')">
                                    <el-radio-group v-model="configObject.style.index" size="small">
                                        <el-radio :label="true">{{ $t('topo.components.topoProperties.038495-183') }}</el-radio>
                                        <el-radio :label="false">{{ $t('topo.components.topoProperties.038495-184') }}</el-radio>
                                    </el-radio-group>
                                </el-form-item>
                                <el-form-item :label="$t('topo.components.topoProperties.038495-185')">
                                    <el-select v-model="configObject.style.carousel" :placeholder="$t('topo.components.topoProperties.038495-186')" style="width: 100%" size="small">
                                        <el-option :label="$t('topo.components.topoProperties.038495-187')" value="single">
                                            <span style="font-size: 12px">{{ $t('topo.components.topoProperties.038495-187') }}</span>
                                        </el-option>
                                        <el-option :label="$t('topo.components.topoProperties.038495-188')" value="page">
                                            <span style="font-size: 12px">{{ $t('topo.components.topoProperties.038495-188') }}</span>
                                        </el-option>
                                    </el-select>
                                </el-form-item>
                            </el-form>
                        </el-collapse-item>
                        <!-- 滚动表格结束 -->
                    </el-collapse>
                </div>
                <!-- 数据绑定 -->
                <div class="table-item" v-show="tabIndex == 1">
                    <el-collapse class="collapse-wrap" v-model="dataCollapseActive">
                        <!-- 参数绑定开始 -->
                        <el-collapse-item :title="$t('topo.components.topoProperties.038495-189')" name="1" v-if="configObject.componentShow && configObject.componentShow.indexOf('参数绑定') > -1">
                            <el-form label-width="75px">
                                <el-form-item :label="$t('topo.components.topoProperties.038495-190')" v-if="configObject.componentShow && configObject.componentShow.indexOf('设备状态') > -1">
                                    <el-select v-model="configObject.dataBind.activeName" :placeholder="$t('topo.components.topoProperties.038495-191')" style="width: 100%" size="small">
                                        <el-option :label="$t('topo.components.topoProperties.038495-192')" value="变量状态">
                                            <span style="font-size: 12px">{{ $t('topo.components.topoProperties.038495-192') }}</span>
                                        </el-option>
                                        <el-option :label="$t('topo.components.topoProperties.038495-193')" value="设备状态">
                                            <span style="font-size: 12px">{{ $t('topo.components.topoProperties.038495-193') }}</span>
                                        </el-option>
                                    </el-select>
                                </el-form-item>

                                <el-form-item :label="$t('topo.components.topoProperties.038495-193')" v-if="configObject.dataBind.activeName == '设备状态'">
                                    <el-select v-model="configObject.dataBind.serialNumber" :placeholder="$t('topo.components.topoProperties.038495-194')" style="width: 100%" size="small" filterable>
                                        <el-option :label="item.deviceName" :value="item.serialNumber" v-for="item in deviceBindList" :key="item.serialNumber">
                                            <span style="font-size: 12px">{{ item.deviceName }}</span>
                                        </el-option>
                                    </el-select>
                                </el-form-item>
                                <el-form-item :label="$t('topo.components.topoProperties.038495-192')" v-if="configObject.dataBind.activeName !== '设备状态' && configObject.dataBind.modelName !== undefined">
                                    <el-input :placeholder="$t('topo.components.topoProperties.038495-195')" v-model="configObject.dataBind.modelName" readonly size="small">
                                        <el-button slot="append" size="small" @click="handleSelectVariable('参数绑定')">{{ $t('select') }}</el-button>
                                    </el-input>
                                </el-form-item>

                                <el-form-item :label="$t('topo.components.topoProperties.038495-316')" v-if="configObject.dataBind.identifiers !== undefined">
                                    <div style="width: 100%; display: flow; text-align: right; padding-right: 5px">
                                        <el-button type="text" icon="el-icon-edit" @click="handleSelectVariable('多参数绑定')"></el-button>
                                    </div>
                                </el-form-item>
                            </el-form>
                        </el-collapse-item>
                        <!-- 参数绑定结束 -->
                        <!-- 组态界面开始 -->
                        <el-collapse-item :title="$t('topo.components.topoProperties.038495-196')" name="2" v-if="configObject && configObject.componentShow.indexOf('组态界面') > -1">
                            <el-form label-width="72px">
                                <el-form-item :label="$t('topo.components.topoProperties.038495-197')">
                                    <el-select v-model="configObject.dataBind.ztPageData" :placeholder="$t('topo.components.topoProperties.038495-198')" style="width: 100%" size="small">
                                        <el-option v-for="item in ztOption" :key="item.id" :label="item.pageName" :value="item.id + '&' + item.guid">
                                            <span style="font-size: 12px">{{ item.pageName }}</span>
                                        </el-option>
                                    </el-select>
                                </el-form-item>
                            </el-form>
                        </el-collapse-item>
                        <!-- 组态界面结束 -->
                        <!-- 萤石云开始 -->
                        <el-collapse-item :title="$t('topo.components.topoProperties.038495-199')" name="3" v-if="configObject.componentShow && configObject.componentShow.indexOf('萤石云') > -1">
                            <el-form label-width="68px">
                                <el-form-item :label="$t('topo.components.topoProperties.038495-200')">
                                    <el-input :placeholder="$t('topo.components.topoProperties.038495-201')" v-model="configObject.dataBind.serialNumber" size="small" clearable />
                                </el-form-item>
                                <el-form-item :label="$t('topo.components.topoProperties.038495-202')">
                                    <el-input :placeholder="$t('topo.components.topoProperties.038495-202')" v-model="configObject.dataBind.channelNumber" size="small" clearable />
                                </el-form-item>
                                <el-form-item label="Token">
                                    <el-input :placeholder="$t('topo.components.topoProperties.038495-201')" v-model="configObject.dataBind.accessToken" size="small" clearable />
                                </el-form-item>
                            </el-form>
                        </el-collapse-item>
                        <!-- 萤石云结束 -->
                        <!-- 直播视频开始 -->
                        <el-collapse-item :title="$t('topo.components.topoProperties.038495-203')" name="4" v-if="configObject.componentShow && configObject.componentShow.indexOf('直播视频') > -1">
                            <el-form label-width="85px">
                                <el-form-item :label="$t('topo.components.topoProperties.038495-204')">
                                    <el-input :placeholder="$t('topo.components.topoProperties.038495-205')" v-model="configObject.videoUrl" size="small" clearable />
                                </el-form-item>
                            </el-form>
                        </el-collapse-item>
                        <!-- 直播视频结束 -->
                        <!-- 通用视频开始 -->
                        <el-collapse-item :title="$t('topo.components.topoProperties.038495-206')" name="5" v-if="configObject.componentShow && configObject.componentShow.indexOf('通用视频') > -1">
                            <el-form label-width="75px">
                                <el-form-item :label="$t('topo.components.topoProperties.038495-207')">
                                    <el-input :placeholder="$t('topo.components.topoProperties.038495-208')" v-model="configObject.videoUrl" size="small" clearable />
                                </el-form-item>
                                <el-form-item :label="$t('topo.components.topoProperties.038495-209')">
                                    <el-input :placeholder="$t('topo.components.topoProperties.038495-210')" v-model="configObject.imageUrl" size="small" clearable />
                                </el-form-item>
                            </el-form>
                        </el-collapse-item>
                        <!-- 通用视频结束 -->
                        <!-- 三维场景开始 -->
                        <el-collapse-item :title="$t('topo.components.topoProperties.038495-211')" name="6" v-if="configObject.componentShow && configObject.componentShow.indexOf('三维') > -1">
                            <el-form label-width="75px">
                                <el-form-item :label="$t('topo.components.topoProperties.038495-212')">
                                    <el-select v-model="configObject.imageUrl" :placeholder="$t('topo.components.topoProperties.038495-213')" @change="handleModelChange" style="width: 100%" size="small">
                                        <el-option :label="item.modelName" :value="item.imageUrl" :key="item.id" v-for="item in ztModelOption">
                                            <span style="font-size: 12px">{{ item.modelName }}</span>
                                        </el-option>
                                    </el-select>
                                </el-form-item>
                            </el-form>
                        </el-collapse-item>
                        <!-- 三维场景结束 -->
                        <!-- echarts图表地址开始 -->
                        <el-collapse-item
                            :title="$t('topo.components.topoProperties.038495-214')"
                            name="7"
                            v-if="configObject.componentShow && (configObject.componentShow.indexOf('自定义echarts') > -1 || configObject.componentShow.indexOf('地图文件') > -1)"
                        >
                            <el-form label-width="70px" label-position="top">
                                <el-button style="width: 100%; margin-top: 5px" type="primary" size="mini" @click="handleHttpSetting">{{ $t('topo.components.topoProperties.038495-346') }}</el-button>
                                <el-button style="width: 100%; margin: 10px 0" type="success" size="mini" @click="handleHttpRun">{{ $t('topo.components.topoProperties.038495-347') }}</el-button>
                                <el-form-item :label="$t('topo.components.topoProperties.038495-217')">
                                    <json-viewer class="json-view-wrap" :value="configObject.dataBind.echartData" :expand-depth="10" copyable>
                                        <template v-slot:copy>{{ $t('topo.components.topoProperties.038495-218') }}</template>
                                    </json-viewer>
                                </el-form-item>
                                <el-form-item :label="$t('topo.components.topoProperties.038495-348')" v-if="configObject.dataBind.httpSetting.url">
                                    <el-button size="mini" @click="handleAddFilter">{{ $t('topo.components.topoProperties.038495-349') }}</el-button>
                                </el-form-item>
                            </el-form>
                        </el-collapse-item>
                        <!-- echarts图表地址结束 -->
                        <!-- 事件点击开始 -->
                        <el-collapse-item :title="$t('topo.components.topoProperties.038495-220')" name="8" v-if="configObject.componentShow && configObject.componentShow.indexOf('单击') > -1">
                            <div class="ixd-wrap">
                                <el-checkbox v-model="configObject.dataEvent.djAction">{{ $t('scada.topoMain.320129-11') }}</el-checkbox>
                                <el-button type="text" icon="el-icon-edit" :disabled="!configObject.dataEvent.djAction" @click="configClick('单击')"></el-button>
                            </div>
                        </el-collapse-item>
                        <!-- 事件点击结束 -->
                        <!-- 组件密码开始 -->
                        <el-collapse-item :title="$t('topo.components.topoProperties.038495-221')" name="9" v-if="configObject.componentShow && configObject.componentShow.indexOf('组件密码') > -1">
                            <el-form label-width="10px">
                                <el-form-item>
                                    <el-radio-group v-model="configObject.dataBind.passwordType" size="small" style="margin-bottom: 10px">
                                        <el-radio label="1">{{ $t('topo.components.topoProperties.038495-303') }}</el-radio>
                                        <el-radio label="2">{{ $t('topo.components.topoProperties.038495-304') }}</el-radio>
                                    </el-radio-group>
                                </el-form-item>
                                <el-form-item v-if="configObject.dataBind.passwordType === '1'">
                                    <el-button size="mini" @click="handleSetPassword">{{ $t('topo.components.topoProperties.038495-222') }}</el-button>
                                </el-form-item>
                            </el-form>
                        </el-collapse-item>
                        <!-- 组件密码结束 -->
                        <!-- 新版线条流动判断开始 -->
                        <el-collapse-item :title="$t('topo.components.topoProperties.038495-223')" name="10" v-if="configObject.componentShow && configObject.componentShow.indexOf('水流') > -1">
                            <el-form label-width="72px">
                                <el-form-item :label="$t('topo.components.topoProperties.038495-224')">
                                    <el-input
                                        type="number"
                                        controls-position="right"
                                        class="input-with-select"
                                        :placeholder="$t('topo.components.topoProperties.038495-225')"
                                        v-model="configObject.dataAction.paramJudgeData"
                                        size="small"
                                    >
                                        <el-select slot="prepend" v-model="configObject.dataAction.paramJudge" :placeholder="$t('pleaseSelect')" size="small">
                                            <el-option label=">" value="大于">
                                                <span style="font-size: 12px">&gt;</span>
                                            </el-option>
                                            <el-option label=">=" value="大于等于">
                                                <span style="font-size: 12px">&gt;=</span>
                                            </el-option>
                                            <el-option label="=" value="等于">
                                                <span style="font-size: 12px">=</span>
                                            </el-option>
                                            <el-option label="<=" value="小于等于">
                                                <span style="font-size: 12px">&lt;=</span>
                                            </el-option>
                                            <el-option label="<" value="小于">
                                                <span style="font-size: 12px">&lt;</span>
                                            </el-option>
                                            <el-option label="!=" value="不等于">
                                                <span style="font-size: 12px">!=</span>
                                            </el-option>
                                        </el-select>
                                    </el-input>
                                </el-form-item>
                                <el-form-item :label="$t('topo.components.topoProperties.038495-226')">
                                    <el-radio-group v-model="configObject.dataAction.direction" size="small">
                                        <el-radio label="正向">{{ $t('topo.components.topoProperties.038495-227') }}</el-radio>
                                        <el-radio label="反向">{{ $t('topo.components.topoProperties.038495-228') }}</el-radio>
                                    </el-radio-group>
                                </el-form-item>
                                <el-form-item :label="$t('topo.components.topoProperties.038495-224')">
                                    <el-input
                                        type="number"
                                        controls-position="right"
                                        class="input-with-select"
                                        :placeholder="$t('topo.components.topoProperties.038495-225')"
                                        v-model="configObject.dataAction.paramJudgeData01"
                                        size="small"
                                    >
                                        <el-select slot="prepend" v-model="configObject.dataAction.paramJudge01" :placeholder="$t('pleaseSelect')" size="small">
                                            <el-option label=">" value="大于">
                                                <span style="font-size: 12px">&gt;</span>
                                            </el-option>
                                            <el-option label=">=" value="大于等于">
                                                <span style="font-size: 12px">&gt;=</span>
                                            </el-option>
                                            <el-option label="=" value="等于">
                                                <span style="font-size: 12px">=</span>
                                            </el-option>
                                            <el-option label="<=" value="小于等于">
                                                <span style="font-size: 12px">&lt;=</span>
                                            </el-option>
                                            <el-option label="<" value="小于">
                                                <span style="font-size: 12px">&lt;</span>
                                            </el-option>
                                            <el-option label="!=" value="不等于">
                                                <span style="font-size: 12px">!=</span>
                                            </el-option>
                                        </el-select>
                                    </el-input>
                                </el-form-item>
                                <el-form-item :label="$t('topo.components.topoProperties.038495-226')">
                                    <el-radio-group v-model="configObject.dataAction.direction01" size="small">
                                        <el-radio :label="$t('topo.components.topoProperties.038495-227')">{{ $t('topo.components.topoProperties.038495-227') }}</el-radio>
                                        <el-radio :label="$t('topo.components.topoProperties.038495-228')">{{ $t('topo.components.topoProperties.038495-228') }}</el-radio>
                                    </el-radio-group>
                                </el-form-item>
                            </el-form>
                        </el-collapse-item>
                        <!-- 线条流动判断结束 -->
                        <!-- 闪烁、旋转、显隐动画 -->
                        <el-collapse-item :title="$t('topo.components.topoProperties.038495-229')" name="11" v-if="configObject.componentShow && configObject.componentShow.indexOf('动画') > -1">
                            <div class="ixd-wrap">
                                <el-checkbox v-model="configObject.dataAction.xyAction">{{ $t('topo.components.topoProperties.038495-230') }}</el-checkbox>
                                <el-button type="text" icon="el-icon-edit" :disabled="!configObject.dataAction.xyAction" @click="configClick('显隐')"></el-button>
                            </div>
                            <div class="ixd-wrap">
                                <el-checkbox v-model="configObject.dataAction.xzAction">{{ $t('topo.components.topoProperties.038495-231') }}</el-checkbox>
                                <el-button type="text" icon="el-icon-edit" :disabled="!configObject.dataAction.xzAction" @click="configClick('旋转')"></el-button>
                            </div>
                            <div class="ixd-wrap">
                                <el-checkbox v-model="configObject.dataAction.ssAction">{{ $t('topo.components.topoProperties.038495-232') }}</el-checkbox>
                                <el-button type="text" icon="el-icon-edit" :disabled="!configObject.dataAction.ssAction" @click="configClick('闪烁')"></el-button>
                            </div>
                            <div class="ixd-wrap">
                                <el-checkbox v-model="configObject.dataAction.hdAction">{{ $t('topo.components.topoProperties.038495-233') }}</el-checkbox>
                                <el-button type="text" icon="el-icon-edit" :disabled="!configObject.dataAction.hdAction" @click="configClick('滑动')"></el-button>
                            </div>
                            <div class="ixd-wrap">
                                <el-checkbox v-model="configObject.dataAction.maAction">{{ $t('topo.components.topoProperties.038495-305') }}</el-checkbox>
                                <el-button type="text" icon="el-icon-edit" :disabled="!configObject.dataAction.maAction" @click="configClick('明暗')"></el-button>
                            </div>
                        </el-collapse-item>
                        <!-- 状态开关开始 -->
                        <el-collapse-item :title="$t('topo.components.topoProperties.038495-234')" name="12" v-if="configObject.componentShow && configObject.componentShow.indexOf('状态开关') > -1">
                            <template v-if="configObject.dataBind.activeName == '变量状态'">
                                <div class="btn-tools-wrap">
                                    <span class="name">{{ $t('topo.components.topoProperties.038495-235') }}</span>
                                    <div>
                                        <el-button type="text" icon="el-icon-plus" size="mini" @click="addSwitch"></el-button>
                                        <el-button type="text" icon="el-icon-delete" style="color: #f56c6c; margin-left: 10px" size="mini" @click="deleteSwitch"></el-button>
                                    </div>
                                </div>
                                <div class="btn-tools-content-wrap" v-for="(item, index) in configObject.dataBind.stateList" :key="index">
                                    <div class="input-wrap">
                                        <el-input type="number" controls-position="right" class="input-with-select" :placeholder="$t('topo.components.topoProperties.038495-225')" v-model="item.paramData" size="small">
                                            <el-select slot="prepend" v-model="item.paramCondition" :placeholder="$t('pleaseSelect')" size="small">
                                                <el-option label=">" value="大于">
                                                    <span style="font-size: 12px">&gt;</span>
                                                </el-option>
                                                <el-option label=">=" value="大于等于">
                                                    <span style="font-size: 12px">&gt;=</span>
                                                </el-option>
                                                <el-option label="=" value="等于">
                                                    <span style="font-size: 12px">=</span>
                                                </el-option>
                                                <el-option label="<=" value="小于等于">
                                                    <span style="font-size: 12px">&lt;=</span>
                                                </el-option>
                                                <el-option label="<" value="小于">
                                                    <span style="font-size: 12px">&lt;</span>
                                                </el-option>
                                                <el-option label="!=" value="不等于">
                                                    <span style="font-size: 12px">!=</span>
                                                </el-option>
                                            </el-select>
                                        </el-input>
                                    </div>
                                    <div class="img-wrap">
                                        <el-image style="width: 30px; height: 30px" fit="fit" v-if="item.imageUrl" :src="item.imageUrl" @click="handleGalleryClick('状态开关-' + item.id)" />
                                        <i v-else class="el-icon-plus" @click="handleGalleryClick('状态开关-' + item.id)"></i>
                                    </div>
                                    <div class="color-picker-wrap">
                                        <el-color-picker v-model="item.foreColor" show-alpha :predefine="predefineColors" size="small" color-format="hex" />
                                    </div>
                                </div>
                            </template>
                            <!-- 设备状态判断在线、离线、报警 -->
                            <div style="margin-top: 8px" v-if="configObject.dataBind.activeName == '设备状态'">
                                <div class="form-item-wrap">
                                    <span class="name">{{ $t('topo.components.topoProperties.038495-236') }}</span>
                                    <div class="content">
                                        <img v-if="this.configObject.dataBind.shutImageUrl" style="width: 30px; height: 30px" :src="configObject.dataBind.shutImageUrl" @click="handleGalleryClick('开关状态(关)')" />
                                        <el-button v-else type="text" icon="el-icon-plus" size="mini" @click="handleGalleryClick('开关状态(关)')"></el-button>
                                    </div>
                                </div>
                                <div class="form-item-wrap">
                                    <span class="name">{{ $t('topo.components.topoProperties.038495-237') }}</span>
                                    <div class="content">
                                        <img v-if="this.configObject.dataBind.openImageUrl" style="width: 30px; height: 30px" :src="configObject.dataBind.openImageUrl" @click="handleGalleryClick('开关状态(开)')" />
                                        <el-button v-else type="text" icon="el-icon-plus" size="mini" @click="handleGalleryClick('开关状态(开)')"></el-button>
                                    </div>
                                </div>
                                <div class="form-item-wrap">
                                    <span class="name">{{ $t('topo.components.topoProperties.038495-238') }}</span>
                                    <div class="content">
                                        <img v-if="this.configObject.dataBind.warnImageUrl" style="width: 30px; height: 30px" :src="configObject.dataBind.warnImageUrl" @click="handleGalleryClick('开关状态(报警)')" />
                                        <el-button v-else type="text" icon="el-icon-plus" size="mini" @click="handleGalleryClick('开关状态(报警)')"></el-button>
                                    </div>
                                </div>
                            </div>
                        </el-collapse-item>
                        <!-- 状态开关结束 -->
                        <!-- 填充颜色开始 -->
                        <el-collapse-item :title="$t('topo.components.topoProperties.038495-239')" name="13" v-if="configObject.componentShow && configObject.componentShow.indexOf('组件填充') > -1">
                            <template>
                                <div class="btn-tools-wrap">
                                    <span class="name">{{ $t('topo.components.topoProperties.038495-235') }}</span>
                                    <div>
                                        <el-button type="text" icon="el-icon-plus" size="mini" @click="addSwitch"></el-button>
                                        <el-button type="text" icon="el-icon-delete" style="color: #f56c6c; margin-left: 10px" size="mini" @click="deleteSwitch"></el-button>
                                    </div>
                                </div>
                                <div class="btn-tools-content-wrap" v-for="(item, index) in configObject.dataBind.stateList" :key="index">
                                    <div class="input-wrap">
                                        <el-input type="number" controls-position="right" class="input-with-select" :placeholder="$t('topo.components.topoProperties.038495-225')" v-model="item.paramData" size="small">
                                            <el-select slot="prepend" v-model="item.paramCondition" :placeholder="$t('pleaseSelect')" size="small">
                                                <el-option label=">" value="大于">
                                                    <span style="font-size: 12px">&gt;</span>
                                                </el-option>
                                                <el-option label=">=" value="大于等于">
                                                    <span style="font-size: 12px">&gt;=</span>
                                                </el-option>
                                                <el-option label="=" value="等于">
                                                    <span style="font-size: 12px">=</span>
                                                </el-option>
                                                <el-option label="<=" value="小于等于">
                                                    <span style="font-size: 12px">&lt;=</span>
                                                </el-option>
                                                <el-option label="<" value="小于">
                                                    <span style="font-size: 12px">&lt;</span>
                                                </el-option>
                                                <el-option label="!=" value="不等于">
                                                    <span style="font-size: 12px">!=</span>
                                                </el-option>
                                            </el-select>
                                        </el-input>
                                    </div>
                                    <div class="color-picker-wrap">
                                        <el-color-picker v-model="item.foreColor" show-alpha :predefine="predefineColors" size="small" color-format="hex" />
                                    </div>
                                </div>
                            </template>
                        </el-collapse-item>
                        <!-- 填充颜色结束 -->
                        <!-- 天气组件开始 -->
                        <el-collapse-item :title="$t('topo.components.topoProperties.038495-240')" name="14" v-if="configObject.componentShow && configObject.componentShow.indexOf('天气') > -1">
                            <el-form label-width="35px">
                                <el-form-item :label="$t('topo.components.topoProperties.038495-241')">
                                    <el-select
                                        v-model="configObject.dataBind.provinceCode"
                                        :placeholder="$t('topo.components.topoProperties.038495-242')"
                                        style="width: 100%"
                                        size="small"
                                        filterable
                                        @change="handleProvinceChange"
                                    >
                                        <el-option v-for="pro in provinceList" :key="pro.code" :label="pro.name" :value="pro.code">
                                            <span style="font-size: 12px">{{ pro.name }}</span>
                                        </el-option>
                                    </el-select>
                                </el-form-item>
                                <el-form-item :label="$t('topo.components.topoProperties.038495-243')">
                                    <el-select
                                        v-model="configObject.dataBind.cityCode"
                                        :placeholder="$t('topo.components.topoProperties.038495-244')"
                                        style="width: 100%"
                                        size="small"
                                        filterable
                                        @change="handleCityChange"
                                    >
                                        <el-option v-for="city in cityList" :key="city.code" :label="city.name" :value="city.code">
                                            <span style="font-size: 12px">{{ city.name }}</span>
                                        </el-option>
                                    </el-select>
                                </el-form-item>
                                <el-form-item :label="$t('topo.components.topoProperties.038495-245')">
                                    <el-select
                                        v-model="configObject.dataBind.districtCode"
                                        :placeholder="$t('topo.components.topoProperties.038495-246')"
                                        style="width: 100%"
                                        size="small"
                                        filterable
                                        @change="handleDistrictChange"
                                    >
                                        <el-option v-for="dis in districtList" :key="dis.code" :label="dis.name" :value="dis.code">
                                            <span style="font-size: 12px">{{ dis.name }}</span>
                                        </el-option>
                                    </el-select>
                                </el-form-item>
                            </el-form>
                            <el-alert style="margin-top: 15px" :title="$t('topo.components.topoProperties.038495-246')" type="warning" :description="$t('topo.components.topoProperties.038495-248')"></el-alert>
                        </el-collapse-item>
                        <!-- 天气组件结束 -->
                        <!-- 卡片组件开始 -->
                        <el-collapse-item :title="$t('topo.components.topoProperties.038495-317')" name="15" v-if="configObject.componentShow && configObject.componentShow.indexOf('卡片') > -1">
                            <el-form label-width="75px">
                                <el-form-item :label="$t('topo.components.topoProperties.038495-318')">
                                    <el-input :placeholder="$t('topo.components.topoProperties.038495-319')" v-model="configObject.dataBind.titleName" size="small" clearable />
                                </el-form-item>
                                <el-form-item :label="$t('topo.components.topoProperties.038495-320')">
                                    <el-button size="mini" @click="handleCustomTableSetting">{{ $t('topo.components.topoProperties.038495-321') }}</el-button>
                                </el-form-item>
                            </el-form>
                        </el-collapse-item>
                        <!-- 卡片组件结束 -->
                        <!-- 内联视频开始 -->
                        <el-collapse-item :title="$t('topo.components.topoProperties.038495-189')" name="16" v-if="configObject.componentShow && configObject.componentShow.indexOf('内联视频') > -1">
                            <el-form v-if="$route.query.type === '3'" label-width="50px">
                                <el-form-item :label="$t('topo.components.topoProperties.038495-307')">
                                    <el-select v-model="configObject.dataBind.serialNumber" :placeholder="$t('topo.components.topoProperties.038495-194')" style="width: 100%" size="small" filterable>
                                        <el-option :label="item.deviceName" :value="item.serialNumber" v-for="item in deviceBindList" :key="item.serialNumber" :disabled="item.deviceType === 3">
                                            <span style="font-size: 12px">{{ item.deviceName }}</span>
                                        </el-option>
                                    </el-select>
                                </el-form-item>
                            </el-form>
                            <el-alert v-else :title="$t('topo.components.topoProperties.038495-247')" type="warning" :description="$t('topo.components.topoProperties.038495-306')" :closable="false"></el-alert>
                        </el-collapse-item>
                        <!-- 内联视频结束 -->
                        <!-- 数据表格开始 -->
                        <el-collapse-item :title="$t('topo.components.topoProperties.038495-338')" name="17" v-if="configObject.componentShow && configObject.componentShow.indexOf('数据表格') > -1">
                            <el-form label-width="75px">
                                <el-form-item :label="$t('topo.components.topoProperties.038495-339')">
                                    <el-radio-group v-model="configObject.dataBind.tableType" size="small">
                                        <el-radio style="margin-right: 16px" :label="1">{{ $t('topo.components.topoProperties.038495-340') }}</el-radio>
                                        <el-radio :label="2">{{ $t('topo.components.topoProperties.038495-341') }}</el-radio>
                                    </el-radio-group>
                                </el-form-item>
                                <el-form-item :label="$t('topo.components.topoProperties.038495-342')">
                                    <el-button size="mini" @click="handleCustomTableSetting">{{ $t('topo.components.topoProperties.038495-343') }}</el-button>
                                </el-form-item>
                            </el-form>
                        </el-collapse-item>
                        <!-- 数据表格结束 -->
                        <!-- 无需绑定数据开始 -->
                        <el-collapse-item :title="$t('topo.components.topoProperties.038495-189')" name="18" v-if="configObject.componentShow && configObject.componentShow.indexOf('暂无绑定') > -1">
                            <el-alert :title="$t('topo.components.topoProperties.038495-247')" type="warning" :description="$t('topo.components.topoProperties.038495-337')" :closable="false"></el-alert>
                        </el-collapse-item>
                        <!-- 无需绑定数据结束 -->
                    </el-collapse>
                </div>
                <!-- 图层 -->
                <div class="table-item" v-show="tabIndex == 2">
                    <div class="layer-box">
                        <draggable
                            :list="topoData.components"
                            :force-fallback="true"
                            chosen-class="chosen"
                            animation="300"
                            :options="{ ghostClass: 'item-ghost', chosenClass: 'is-active' }"
                            @end="handelLayerItemDraggableEnd"
                        >
                            <div class="layers-list-item" :class="{ 'is-active': layerActiveIndex === index }" v-for="(item, index) in topoData.components" :key="index" @click="handelLayerItemClick(index, item)">
                                <template v-if="item.img">
                                    <img v-if="item.img.type === 'static'" class="img" :src="require('@/assets/topo-img/' + item.img.icon)" />
                                    <svg-icon v-else-if="item.img.type === 'svg'" class="img" :icon-class="item.img.icon" />
                                    <img v-else class="img" :src="item.img.icon" />
                                </template>
                                <span class="name">{{ item.name }}</span>
                                <div class="tools">
                                    <svg-icon v-if="item.isLock" icon-class="password_open" @pointerdown.stop.native @click.stop="handleLayerItemLock(item)" />
                                    <svg-icon v-else icon-class="password" @pointerdown.stop.native @click.stop="handleLayerItemLock(item)" />
                                    <svg-icon v-if="item.style.visible" icon-class="eye" @pointerdown.stop.native @click.stop="handleLayerItemHide(item)" />
                                    <svg-icon v-else icon-class="eye_close" @pointerdown.stop.native @click.stop="handleLayerItemHide(item)" />
                                    <svg-icon icon-class="edit" @pointerdown.stop.native @click.stop="handleLayerItemNameEdit(item)"></svg-icon>
                                </div>
                            </div>
                        </draggable>
                    </div>
                </div>
            </div>
        </template>
        <!-- 界面背景设置 -->
        <template v-if="isLayer">
            <el-form class="bg-set-wrap" label-width="70px">
                <el-form-item :label="$t('topo.components.topoProperties.038495-249')">
                    <el-input :placeholder="$t('topo.components.topoProperties.038495-250')" v-model="topoData.name" size="small"></el-input>
                </el-form-item>
                <el-form-item :label="$t('scada.center.indeieScada.373453-6')">
                    <el-select v-model="resolution" :placeholder="$t('pleaseSelect')" style="width: 100%" size="small">
                        <el-option v-for="dict in dict.type.sys_page_size" :key="dict.value" :label="dict.label" :value="dict.value">
                            <span style="font-size: 12px">{{ dict.label }}</span>
                        </el-option>
                        <el-option key="custom" :label="$t('topo.components.chart.073848-8')" value="custom">
                            <span style="font-size: 12px">{{ $t('topo.components.chart.073848-8') }}</span>
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item :label="$t('topo.components.topoProperties.038495-251')" v-if="resolution === 'custom'">
                    <el-input-number style="width: 100%" controls-position="right" :placeholder="$t('topo.components.topoProperties.038495-252')" v-model="topoData.layer.width" size="small" :min="100" />
                </el-form-item>
                <el-form-item :label="$t('topo.components.topoProperties.038495-253')" v-if="resolution === 'custom'">
                    <el-input-number style="width: 100%" controls-position="right" :placeholder="$t('topo.components.topoProperties.038495-254')" v-model="topoData.layer.height" size="small" :min="100" />
                </el-form-item>
                <el-form-item :label="$t('topo.components.topoProperties.038495-255')">
                    <el-color-picker v-model="topoData.layer.backColor" show-alpha :predefine="predefineColors" color-format="hex" />
                </el-form-item>
                <el-form-item :label="$t('topo.components.topoProperties.038495-256')">
                    <div class="bg-img-wrap" @click="handleGalleryClick('背景图片')">
                        <img class="img-wrap" v-if="topoData.layer.backgroundImage" :src="topoData.layer.backgroundImage" />
                        <i v-else class="el-icon-plus ico-wrap"></i>
                        <span class="img-tools" v-if="topoData.layer.backgroundImage" @click.stop>
                            <i class="el-icon-plus" @click.stop="handleGalleryClick('背景图片')"></i>
                            <i class="el-icon-delete" @click.stop="topoData.layer.backgroundImage = ''"></i>
                        </span>
                    </div>
                </el-form-item>
                <el-form-item :label="$t('topo.components.topoProperties.038495-257')">
                    <el-checkbox v-model="topoData.layer.dragZoom" size="small">{{ $t('topo.components.topoProperties.038495-258') }}</el-checkbox>
                </el-form-item>
            </el-form>
        </template>
        <!-- 图库对话框 -->
        <el-dialog :title="$t('topo.components.topoProperties.038495-259')" :visible.sync="isGalleryDialog" width="1100px" :close-on-click-modal="false">
            <div class="el-divider el-divider--horizontal" style="margin-top: -25px"></div>
            <topo-select-image ref="topoSelectImage" />
            <span slot="footer">
                <el-button type="primary" @click="selectImageClick">{{ $t('confirm') }}</el-button>
                <el-button @click="isGalleryDialog = false">{{ $t('cancel') }}</el-button>
            </span>
        </el-dialog>
        <!--图片动画设置  -->
        <el-dialog
            v-if="configObject && configObject.componentShow.indexOf('动画') > -1"
            :title="$t('topo.components.topoProperties.038495-260')"
            :visible.sync="animationDialog"
            width="600px"
            :close-on-click-modal="false"
            v-dialogDrag
        >
            <el-form label-width="100px">
                <el-form-item :label="$t('topo.components.topoProperties.038495-261')">
                    <el-input :placeholder="$t('topo.components.topoProperties.038495-195')" v-model="configObject.dataAction.modelName" readonly style="width: 400px">
                        <el-button slot="append" @click="handleSelectVariable">{{ $t('select') }}</el-button>
                    </el-input>
                </el-form-item>
                <el-form-item :label="$t('topo.components.topoProperties.038495-262')" prop="paramJudge">
                    <el-input
                        type="number"
                        controls-position="right"
                        class="input-with-select"
                        :placeholder="$t('topo.components.topoProperties.038495-225')"
                        v-model="configObject.dataAction.paramJudgeData"
                        style="width: 400px"
                    >
                        <el-select slot="prepend" v-model="configObject.dataAction.paramJudge" :placeholder="$t('pleaseSelect')">
                            <el-option label=">" value="大于">
                                <span style="font-size: 12px">&gt;</span>
                            </el-option>
                            <el-option label=">=" value="大于等于">
                                <span style="font-size: 12px">&gt;=</span>
                            </el-option>
                            <el-option label="=" value="等于">
                                <span style="font-size: 12px">=</span>
                            </el-option>
                            <el-option label="<=" value="小于等于">
                                <span style="font-size: 12px">&lt;=</span>
                            </el-option>
                            <el-option label="<" value="小于">
                                <span style="font-size: 12px">&lt;</span>
                            </el-option>
                            <el-option label="!=" value="不等于">
                                <span style="font-size: 12px">!=</span>
                            </el-option>
                        </el-select>
                    </el-input>
                </el-form-item>
                <el-form-item v-if="clickText === '旋转'" :label="$t('topo.components.topoProperties.038495-264')" prop="rotationSpeed">
                    <el-radio-group v-model="configObject.dataAction.rotationSpeed">
                        <el-radio :label="$t('topo.components.topoProperties.038495-149')">{{ $t('topo.components.topoProperties.038495-149') }}</el-radio>
                        <el-radio :label="$t('topo.components.topoProperties.038495-150')">{{ $t('topo.components.topoProperties.038495-150') }}</el-radio>
                        <el-radio :label="$t('topo.components.topoProperties.038495-151')">{{ $t('topo.components.topoProperties.038495-151') }}</el-radio>
                    </el-radio-group>
                </el-form-item>
                <div v-if="clickText === '滑动'">
                    <el-form-item :label="$t('topo.components.topoProperties.038495-266')">
                        <el-button type="primary" size="small" icon="el-icon-plus" plain circle @click="addTranslate"></el-button>
                        <el-button type="danger" size="small" icon="el-icon-delete" plain circle @click="deleteTranslate"></el-button>
                    </el-form-item>
                    <el-form-item :label="$t('topo.components.topoProperties.038495-267')">
                        <el-input-number
                            style="width: 400px"
                            controls-position="right"
                            v-model="configObject.dataAction.duration"
                            clearable
                            :placeholder="$t('topo.components.topoProperties.038495-268')"
                        ></el-input-number>
                    </el-form-item>
                    <el-form-item :label="$t('topo.components.topoProperties.038495-269')" v-for="(item, index) in configObject.dataAction.translateList" :key="index">
                        <el-input type="number" controls-position="right" class="input-with-select" :placeholder="$t('topo.components.topoProperties.038495-269')" v-model="item.position" style="width: 400px">
                            <el-select slot="prepend" v-model="item.direction" :placeholder="$t('pleaseSelect')">
                                <el-option :label="$t('topo.components.topoProperties.038495-271')" value="水平">
                                    <span style="font-size: 12px">{{ $t('topo.components.topoProperties.038495-271') }}</span>
                                </el-option>
                                <el-option :label="$t('topo.components.topoProperties.038495-272')" value="竖直">
                                    <span style="font-size: 12px">{{ $t('topo.components.topoProperties.038495-272') }}</span>
                                </el-option>
                            </el-select>
                        </el-input>
                    </el-form-item>
                </div>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="animationSubmit">{{ $t('confirm') }}</el-button>
                <el-button @click="animationDialog = false">{{ $t('cancel') }}</el-button>
            </div>
        </el-dialog>
        <!-- 变量选择 -->
        <el-dialog width="1000px" :title="$t('topo.components.topoProperties.038495-273')" :visible.sync="isVariableDialog" append-to-body :close-on-click-modal="false">
            <topo-variable ref="topoVariable" :multiple="multiple" />
            <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="handleSelectVariableConfirm">{{ $t('confirm') }}</el-button>
                <el-button @click="isVariableDialog = false">{{ $t('cancel') }}</el-button>
            </span>
        </el-dialog>
        <!--事件单击设置  -->
        <el-dialog v-if="configObject && configObject.componentShow.indexOf('单击') > -1" :title="$t('topo.components.topoProperties.038495-274')" :visible.sync="singleClickDialog" width="600px">
            <el-form label-width="100px">
                <el-form-item :label="$t('topo.components.topoProperties.038495-275')">
                    <el-radio-group v-model="configObject.dataEvent.action">
                        <el-radio label="1">{{ $t('topo.components.topoProperties.038495-276') }}</el-radio>
                        <el-radio label="2">{{ $t('topo.components.topoProperties.038495-277') }}</el-radio>
                        <el-radio label="3">{{ $t('topo.components.topoProperties.038495-278') }}</el-radio>
                        <el-radio v-if="configObject.type == 'image-switch'" label="4">{{ $t('topo.components.topoProperties.038495-279') }}</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item :label="$t('topo.components.topoProperties.038495-261')" v-if="configObject.dataEvent.action === '1' || configObject.dataEvent.action === '4'">
                    <el-input :placeholder="$t('topo.components.topoProperties.038495-195')" v-model="configObject.dataEvent.modelName" readonly style="width: 400px">
                        <el-button slot="append" @click="handleSelectVariable">{{ $t('select') }}</el-button>
                    </el-input>
                </el-form-item>
                <el-form-item :label="$t('topo.components.topoProperties.038495-280')" v-if="configObject.dataEvent.action === '1'">
                    <el-input v-model="configObject.dataEvent.modelValue" placeholder="为空即为可变值" style="width: 400px" />
                </el-form-item>
                <el-form-item :label="$t('topo.components.topoProperties.038495-281')" v-if="configObject.dataEvent.action === '1'">
                    <el-input v-model="configObject.dataEvent.tipMsg" :placeholder="$t('topo.components.topoProperties.038495-282')" clearable style="width: 400px" />
                </el-form-item>
                <el-form-item :label="$t('topo.components.topoProperties.038495-283')" v-if="configObject.dataEvent.action === '2'">
                    <el-input v-model="configObject.dataEvent.redirectUrl" :placeholder="$t('topo.components.topoProperties.038495-284')" clearable style="width: 400px" />
                </el-form-item>
                <el-form-item :label="$t('topo.components.topoProperties.038495-278')" v-if="configObject.dataEvent.action === '3'">
                    <el-select v-model="configObject.dataEvent.ztPage" clearable :placeholder="$t('topo.components.topoProperties.038495-198')" @change="selectZtPage" style="width: 400px">
                        <el-option :label="item.pageName" :value="item.guid" v-for="item in ztOption" :key="item.id" />
                    </el-select>
                </el-form-item>
                <el-form-item :label="$t('topo.components.topoProperties.038495-288')" v-if="configObject.dataEvent.action === '3'">
                    <el-radio-group v-model="configObject.dataEvent.openModel">
                        <el-radio :label="1">{{ $t('topo.components.topoProperties.038495-289') }}</el-radio>
                        <el-radio :label="2">{{ $t('topo.components.topoProperties.038495-290') }}</el-radio>
                        <el-radio :label="3">{{ $t('topo.components.topoProperties.038495-291') }}</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item :label="$t('topo.components.topoProperties.038495-292')" v-if="configObject.dataEvent.action === '3' && configObject.dataEvent.openModel === 3">
                    <el-input v-model="configObject.dataEvent.windowWidth" :placeholder="$t('topo.components.topoProperties.038495-293')" clearable style="width: 400px" />
                </el-form-item>
                <el-form-item :label="$t('topo.components.topoProperties.038495-294')" v-if="configObject.dataEvent.action === '3' && configObject.dataEvent.openModel === 3">
                    <el-input v-model="configObject.dataEvent.windowHeight" :placeholder="$t('topo.components.topoProperties.038495-295')" clearable style="width: 400px" />
                </el-form-item>
                <el-form-item :label="$t('topo.components.topoProperties.038495-285')" v-if="configObject.dataEvent.action === '4'">
                    <el-radio-group v-model="configObject.dataEvent.controValue">
                        <el-radio label="0关1开">{{ $t('topo.components.topoProperties.038495-286') }}</el-radio>
                        <el-radio label="0开1关">{{ $t('topo.components.topoProperties.038495-287') }}</el-radio>
                    </el-radio-group>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="singleClickSubmit">{{ $t('confirm') }}</el-button>
                <el-button @click="singleClickDialog = false">{{ $t('cancel') }}</el-button>
            </div>
        </el-dialog>
        <!-- 代码视图 -->
        <el-dialog
            class="data-engine-dialog"
            v-if="configObject"
            :title="$t('topo.components.topoProperties.038495-296')"
            :visible.sync="isCodeViewDialog"
            width="50%"
            append-to-body
            :close-on-click-modal="false"
            v-dialogDrag
        >
            <div class="el-divider el-divider--horizontal" style="margin-top: -25px"></div>
            <div class="title-wrap">
                <a style="color: #1890ff" href="https://www.isqqw.com/" target="_blank">{{ $t('topo.components.topoProperties.038495-297') }}</a>
                <span>{{ $t('topo.components.topoProperties.038495-368') }}</span>
                <i class="el-icon-info" @click="isEchartExplainDialog = true" style="color: #e6a23c; margin-left: 5px"></i>
            </div>
            <monaco-editor ref="monaco" height="70vh" :value="configObject.dataBind.echartOption" @change="handleMonacoChange"></monaco-editor>
            <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="handleEchartRunClick">{{ $t('topo.components.topoProperties.038495-299') }}</el-button>
                <el-button @click="isCodeViewDialog = false">{{ $t('close') }}</el-button>
            </span>
        </el-dialog>
        <el-dialog :title="$t('topo.components.topoProperties.038495-300')" :visible.sync="isEchartExplainDialog" width="40%" append-to-body :close-on-click-modal="false">
            <div class="el-divider el-divider--horizontal" style="margin-top: -25px"></div>
            <div class="box-message" v-html="$topoUtil.getEchartExplain()"></div>
            <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="isEchartExplainDialog = false">{{ $t('close') }}</el-button>
            </span>
        </el-dialog>
        <!-- 公共配置 -->
        <el-dialog :title="$t('topo.components.topoProperties.038495-350')" :visible.sync="isHttpSetting" width="900px" append-to-body :close-on-click-modal="false">
            <el-form label-width="100px">
                <el-form-item :label="$t('topo.components.topoProperties.038495-351')">
                    <el-row>
                        <el-col :span="16">
                            <el-input :placeholder="$t('topo.components.topoProperties.038495-352')" v-model="httpSetting.url">
                                <el-select style="width: 100px" v-model="httpSetting.type" slot="prepend">
                                    <el-option label="get" value="get"></el-option>
                                    <el-option label="post" value="post"></el-option>
                                    <el-option label="put" value="put"></el-option>
                                </el-select>
                            </el-input>
                        </el-col>
                        <el-col :span="8">
                            <el-input style="margin-left: 10px; width: 170px" type="number" :placeholder="$t('topo.components.topoProperties.038495-353')" v-model="httpSetting.time">
                                <el-select style="width: 70px" v-model="httpSetting.unit" slot="append">
                                    <el-option :label="$t('topo.components.topoProperties.038495-354')" value="s"></el-option>
                                    <el-option :label="$t('topo.components.topoProperties.038495-355')" value="m"></el-option>
                                    <el-option :label="$t('topo.components.topoProperties.038495-356')" value="h"></el-option>
                                </el-select>
                            </el-input>
                        </el-col>
                    </el-row>
                </el-form-item>
                <el-form-item :label="$t('topo.components.topoProperties.038495-357')">
                    <div>{{ $t('topo.components.topoProperties.038495-358') }}</div>
                    <el-tabs style="width: 80%" v-model="httpSetting.tabActive">
                        <el-tab-pane style="height: 300px; overflow-y: auto" label="Params" name="params">
                            <el-table :data="httpSetting.paramsData" style="width: 100%" :border="false" size="mini">
                                <el-table-column type="index" width="50"></el-table-column>
                                <el-table-column prop="key" label="Key">
                                    <template slot-scope="scope">
                                        <el-input :placeholder="$t('topo.components.topoProperties.038495-359')" v-model="scope.row.key" size="small" clearable></el-input>
                                    </template>
                                </el-table-column>
                                <el-table-column prop="value" label="Value">
                                    <template slot-scope="scope">
                                        <el-input :placeholder="$t('topo.components.topoProperties.038495-359')" v-model="scope.row.value" size="small" clearable></el-input>
                                    </template>
                                </el-table-column>
                                <el-table-column prop="address" :label="$t('topo.components.topoProperties.038495-360')" width="120">
                                    <template slot-scope="scope">
                                        <el-button type="primary" plain size="mini" @click="handleAddHttpParams">+</el-button>
                                        <el-button type="danger" plain size="mini" @click="handleDeleteHttpParams(scope.$index)">-</el-button>
                                    </template>
                                </el-table-column>
                            </el-table>
                        </el-tab-pane>
                        <el-tab-pane style="height: 300px" label="Body" name="body">
                            <el-radio-group v-model="httpSetting.bodyType" @input="handleHttpBodyRadioInput">
                                <el-radio :label="1">none</el-radio>
                                <el-radio :label="2">form-data</el-radio>
                            </el-radio-group>
                            <el-empty v-if="httpSetting.bodyType === 1" :description="$t('topo.components.topoProperties.038495-361')"></el-empty>
                            <el-table v-if="httpSetting.bodyType === 2" :data="httpSetting.bodyData" style="width: 100%; height: 264px; overflow-y: auto" :border="false" size="mini">
                                <el-table-column type="index" width="50"></el-table-column>
                                <el-table-column prop="key" label="Key">
                                    <template slot-scope="scope">
                                        <el-input :placeholder="$t('topo.components.topoProperties.038495-359')" v-model="scope.row.key" size="small" clearable></el-input>
                                    </template>
                                </el-table-column>
                                <el-table-column prop="value" label="Value">
                                    <template slot-scope="scope">
                                        <el-input :placeholder="$t('topo.components.topoProperties.038495-359')" v-model="scope.row.value" size="small" clearable></el-input>
                                    </template>
                                </el-table-column>
                                <el-table-column prop="address" :label="$t('topo.components.topoProperties.038495-360')" width="120">
                                    <template slot-scope="scope">
                                        <el-button type="primary" plain size="mini" @click="handleAddHttpBody">+</el-button>
                                        <el-button type="danger" plain size="mini" @click="handleDeleteHttpBody(scope.$index)">-</el-button>
                                    </template>
                                </el-table-column>
                            </el-table>
                        </el-tab-pane>
                        <el-tab-pane style="height: 300px; overflow-y: auto" label="Headers" name="headers">
                            <el-table :data="httpSetting.headerData" style="width: 100%" :border="false" size="mini">
                                <el-table-column type="index" width="50"></el-table-column>
                                <el-table-column prop="key" label="Key">
                                    <template slot-scope="scope">
                                        <el-input :placeholder="$t('topo.components.topoProperties.038495-359')" v-model="scope.row.key" size="small" clearable></el-input>
                                    </template>
                                </el-table-column>
                                <el-table-column prop="value" label="Value">
                                    <template slot-scope="scope">
                                        <el-input :placeholder="$t('topo.components.topoProperties.038495-359')" v-model="scope.row.value" size="small" clearable></el-input>
                                    </template>
                                </el-table-column>
                                <el-table-column prop="address" :label="$t('topo.components.topoProperties.038495-360')" width="120">
                                    <template slot-scope="scope">
                                        <el-button type="primary" plain size="mini" @click="handleAddHttpHeader">+</el-button>
                                        <el-button type="danger" plain size="mini" @click="handleDeleteHttpHeader(scope.$index)">-</el-button>
                                    </template>
                                </el-table-column>
                            </el-table>
                        </el-tab-pane>
                    </el-tabs>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="handleSaveHttpSetting">{{ $t('topo.components.topoProperties.038495-362') }}</el-button>
                <el-button @click="isHttpSetting = false">{{ $t('topo.components.topoProperties.038495-363') }}</el-button>
            </span>
        </el-dialog>
        <el-dialog :title="$t('topo.components.topoProperties.038495-364')" :visible.sync="isFuncFilter" width="1000px" append-to-body :close-on-click-modal="false">
            <el-row :gutter="15">
                <el-col :span="12">
                    <div style="background-color: #1e1e1e; border-radius: 5px">
                        <div style="padding: 10px">
                            <span style="color: #b478cf">function &nbsp;</span>
                            <span style="color: #70c0e8">filter(data) &lbrace;</span>
                        </div>
                        <monaco-editor ref="filterEditor" height="70vh" @change="handleFilterEditorChange"></monaco-editor>
                        <div style="padding: 10px; color: #70c0e8">&rbrace;</div>
                    </div>
                </el-col>
                <el-col :span="12" style="height: calc(70vh + 74px); overflow-y: auto">
                    <div style="background-color: #1e1e1e; padding: 20px; border-radius: 5px; color: #fff">
                        {{ $t('topo.components.topoProperties.038495-365') }}{{ filterOldData || $t('topo.components.topoProperties.038495-367') }}
                    </div>
                    <div style="background-color: #1e1e1e; padding: 20px; border-radius: 5px; margin-top: 10px; color: #fff">
                        {{ $t('topo.components.topoProperties.038495-366') }}{{ filterNewData || $t('topo.components.topoProperties.038495-367') }}
                    </div>
                </el-col>
            </el-row>
            <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="handleSaveFilterData">{{ $t('topo.components.topoProperties.038495-362') }}</el-button>
                <el-button @click="isFuncFilter = false">{{ $t('topo.components.topoProperties.038495-363') }}</el-button>
            </span>
        </el-dialog>
        <!-- 组件密码 -->
        <el-dialog :title="$t('topo.components.topoProperties.038495-301')" :visible.sync="isSetPasswordDialog" width="550px" append-to-body :close-on-click-modal="false">
            <el-form label-width="100px">
                <el-form-item :label="$t('topo.components.topoProperties.038495-302')">
                    <el-input v-model="compPassword" :placeholder="$t('topo.topoRender.038944-8')" clearable type="password" show-password style="width: 350px" />
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="handleSetPasswordSubmit">{{ $t('confirm') }}</el-button>
                <el-button @click="isSetPasswordDialog = false">{{ $t('close') }}</el-button>
            </span>
        </el-dialog>
        <!-- 自定义展示列 -->
        <el-dialog :title="$t('topo.components.topoProperties.038495-322')" :visible.sync="isCustomTableDialog" width="600px" append-to-body :close-on-click-modal="false">
            <el-table ref="customTable" :data="customTableData" size="small" :border="false">
                <el-table-column prop="columnName" :label="$t('topo.components.topoProperties.038495-323')" align="left" min-width="150" />
                <el-table-column prop="visible" :label="$t('topo.components.topoProperties.038495-324')" align="center" width="120">
                    <template slot-scope="scope">
                        <el-checkbox v-model="scope.row.visible"></el-checkbox>
                    </template>
                </el-table-column>
                <el-table-column prop="color" :label="$t('topo.components.topoProperties.038495-325')" align="center" width="120">
                    <template slot-scope="scope">
                        <el-color-picker v-if="scope.row.color" v-model="scope.row.color" show-alpha :predefine="predefineColors" color-format="hex" size="small" />
                        <span v-else>{{ $t('topo.components.topoProperties.038495-326') }}</span>
                    </template>
                </el-table-column>
            </el-table>
            <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="handleCustomTableSubmit">{{ $t('topo.components.topoProperties.038495-327') }}</el-button>
                <el-button @click="isCustomTableDialog = false">{{ $t('topo.components.topoProperties.038495-328') }}</el-button>
            </span>
        </el-dialog>
        <div class="setup-angle-wrap" v-show="configObject" @mouseenter="mouseEnterAngle" @mouseleave="mouseLeaveAngle" :style="angleStyle">
            <setup-angle ref="setupAngle" @angle="onAngle" />
        </div>
    </div>
</template>
<script>
import { mapState } from 'vuex';
import JsonViewer from 'vue-json-viewer';
import draggable from 'vuedraggable';

import TopoSelectImage from './topoSelectImage';
import TopoVariable from './topoVariable';
import SetupAngle from './topoAngle';

import { listCenter } from '@/api/scada/center';
import { listModel } from '@/api/scada/model';
import { listDeviceBind } from '@/api/scada/topo';
import cityDatas from '@/assets/json/citylist.json';

export default {
    name: 'TopoProperties',
    dicts: ['sys_page_size'],
    components: {
        draggable,
        JsonViewer,
        TopoSelectImage,
        TopoVariable,
        SetupAngle,
    },
    props: {
        layerActiveIndex: {
            type: Number,
            required: null,
        },
    },
    data() {
        return {
            baseApi: process.env.VUE_APP_BASE_API,
            tabIndex: 0, // tabs
            resolutionTemp: '', // 临时存分辨率
            styleCollapseActive: ['1', '2', '3'],
            dataCollapseActive: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15', '16', '17', '18'],
            // 默认色体
            predefineColors: [
                '#ff4500',
                '#ff8c00',
                '#ffd700',
                '#90ee90',
                '#00ced1',
                '#1e90ff',
                '#c71585',
                'rgba(255, 69, 0, 0.68)',
                'rgb(255, 120, 0)',
                'hsv(51, 100, 98)',
                'hsva(120, 40, 94, 0.5)',
                'hsl(181, 100%, 37%)',
                'hsla(209, 100%, 56%, 0.73)',
                '#c7158577',
                '#ffffff',
                '#000',
            ],
            deviceBindList: [], // 设备绑定
            ztOption: [], // 组态页面集合
            // 文字
            fontFamilyOptions: ['Arial', 'Helvetica', 'sans-serif', '宋体', '新宋体', '黑体', '微软雅黑', '楷体', '隶书', '幼圆', '华文琥珀', '华文行楷', '华文新魏'], // 字体类型
            fontStyleOptions: [
                { id: 'normal', text: '正常' },
                { id: 'italic', text: '倾斜' },
                { id: 'oblique', text: '倾斜(字体不支持使用)' },
            ], // 字体样式
            fontWeightOptions: [
                { id: 'normal', text: '正常' },
                { id: 'lighter', text: '细体' },
                { id: 'bold', text: '粗体' },
            ], // 字体粗细
            dataTypeOptions: [
                { id: 'binary', text: '二进制', value: 2 },
                { id: 'octonary', text: '八进制', value: 8 },
                { id: 'decimal', text: '十进制', value: 10 },
                { id: 'hexadecimal', text: '十六进制', value: 16 },
            ], // 数据类型
            textAlignOptions: ['left', 'right', 'center', 'justify'], // 字体位置
            borderStyleOptions: ['solid', 'dashed', 'dotted'], // 字体类型
            // 变量选择
            isVariableDialog: false, // 变量对话框
            multiple: false, // false单选，true多选
            // 卡片设置
            isCustomTableDialog: false, // 自定义表单
            customTableData: [
                {
                    id: 'index',
                    columnName: '序号',
                    visible: true,
                    color: '#606266',
                },
                {
                    id: 'deviceName',
                    columnName: '设备',
                    visible: true,
                    color: '#606266',
                },
                {
                    id: 'slaveName',
                    columnName: '从机',
                    visible: true,
                    color: '#606266',
                },
                {
                    id: 'modelName',
                    columnName: '变量名',
                    visible: true,
                    color: '#606266',
                },
                {
                    id: 'value',
                    columnName: '当前值',
                    visible: true,
                    color: '#606266',
                },
                {
                    id: 'unit',
                    columnName: '单位',
                    visible: true,
                    color: '#606266',
                },
                {
                    id: 'ts',
                    columnName: '更新时间',
                    visible: true,
                    color: '#606266',
                },
            ],
            // 天气组件位置
            provinceList: cityDatas, // 省
            cityList: [], // 市
            districtList: [], // 区
            // http 编辑配置
            isHttpSetting: false, // 是否开启配置
            httpSetting: {
                url: '', // 请求地址
                type: 'get', // 请求方式
                time: 60, // 请求周期
                unit: 's', // 请求单位
                tabActive: 'params',
                paramsData: [{}],
                bodyType: 1, // body 类型
                bodyData: [{}],
                headerData: [{}],
            },
            isFuncFilter: false, // 函数管理器开启
            filterOldData: '', // 过滤器旧数据
            filterNewData: '', // 过滤器旧数据
            filterRule: '',
            // 代码视图
            isCodeViewDialog: false, // 代码视图对话框
            isEchartExplainDialog: false, // 数据引擎示例对话框
            // 当前的选择图片
            isGalleryDialog: false, // 图片对话框
            imgProperty: '', // 图片属性
            // 3d模型
            ztModelOption: [],
            // 组件密码
            isSetPasswordDialog: false, // 设置密码对话框
            compPassword: '',

            bindParams: [],
            animationDialog: false,
            animationForm: {},

            singleClickDialog: false,
            //变量选择
            deviceImei: this.$route.query.deviceImei,

            clickText: '', // 点击类型

            paramNameList: [
                '设备总数',
                '设备在线数',
                '设备离线数',
                '设备报警数',
                '在线比率',
                '日报警总数',
                '日报警已处理',
                '日报警未处理',
                '日报警处理比率',
                '周报警总数',
                '周报警已处理',
                '周报警未处理',
                '周报警处理比率',
                '月报警总数',
                '月报警已处理',
                '月报警未处理',
                '月报警处理比率',
                '年报警已处理',
                '年报警未处理',
                '年报警处理比率',
                '日工单总数',
                '日工单已处理',
                '日工单未处理',
                '日工单处理比率',
                '周工单总数',
                '周工单已处理',
                '周工单未处理',
                '周工单处理比率',
                '月工单总数',
                '月工单已处理',
                '月工单未处理',
                '月工单处理比率',
                '年工单总数',
                '年工单已处理',
                '年工单未处理',
                '年工单处理比率',
            ],
            // angle样式
            angleStyle: {
                opacity: 0.1,
            },
            debouncedWatch: null,
        };
    },
    computed: {
        ...mapState({
            topoData: (state) => state.topoEditor.topoData,
            selectedComponents: (state) => state.topoEditor.selectedComponents,
            selectedComponentMap: (state) => state.topoEditor.selectedComponentMap,
            isLayer: (state) => state.topoEditor.selectedIsLayer,
            configObject: (state) => state.topoEditor.selectedComponent,
            historyData: (state) => state.topoEditor.historyData,
        }),
        animations() {
            let items = [];
            items =
                this.configObject.direction && this.configObject.direction == 'vertical'
                    ? [
                          { label: '向上', value: 'up' },
                          { label: '向下', value: 'down' },
                      ]
                    : [
                          { label: '向右', value: 'right' },
                          { label: '向左', value: 'left' },
                      ];
            return items;
        },
        // 分辨率
        resolution: {
            get: function (val) {
                if (this.resolutionTemp === 'custom') {
                    return 'custom';
                } else {
                    return this.topoData.layer.width + 'x' + this.topoData.layer.height;
                }
            },
            set: function (val) {
                this.resolutionTemp = val;
                if (val !== 'custom') {
                    var wh = val.split('x');
                    this.topoData.layer.width = parseInt(wh[0]);
                    this.topoData.layer.height = parseInt(wh[1]);
                }
                return val;
            },
        },
    },
    mounted() {
        this.getZtPage();
        this.getZtModel();
        this.getBindDeviceList();
    },
    methods: {
        // 获取组态列表
        getZtPage() {
            const { id, type } = this.$route.query;
            const params = {
                type: Number(type),
            };
            listCenter(params).then((res) => {
                const { code, rows } = res;
                if (code === 200) {
                    if (rows && rows.length !== 0) {
                        this.ztOption = rows.filter((item) => item.id !== Number(id)) || [];
                    }
                }
            });
        },
        // 变量选择窗口
        handleSelectVariable(val) {
            if (val === '参数绑定') {
                this.multiple = false;
                this.clickText = val;
            }
            if (val === '多参数绑定') {
                this.multiple = true;
                this.clickText = val;
            }
            this.isVariableDialog = true;
            this.$refs.topoVariable && this.$refs.topoVariable.clearSelection();
        },
        // 变量选择事件
        handleSelectVariableConfirm() {
            this.isVariableDialog = false;
            let selectRowData = null;
            if (this.clickText === '多参数绑定') {
                selectRowData = this.$refs.topoVariable.selectRowsDataClick();
                console.log('多参数绑定', selectRowData);
            } else {
                selectRowData = this.$refs.topoVariable.selectRowDataClick();
                console.log('单参数绑定', selectRowData);
            }
            if (this.clickText === '闪烁' || this.clickText === '旋转' || this.clickText === '显隐' || this.clickText === '滑动' || this.clickText === '明暗') {
                // 用于接收指令
                this.configObject.dataAction.sceneModelId = selectRowData.sceneModelId;
                this.configObject.dataAction.sceneModelDeviceId = selectRowData.sceneModelDeviceId;
                this.configObject.dataAction.variableType = selectRowData.variableType;
                this.configObject.dataAction.serialNumber = selectRowData.serialNumber;
                this.configObject.dataAction.productId = selectRowData.productId;
                this.configObject.dataAction.identifier = selectRowData.identifier;
                this.configObject.dataAction.modelName = selectRowData.modelName;
            } else if (this.clickText == '参数绑定') {
                // 用于接收指令
                this.configObject.dataBind.sceneModelId = selectRowData.sceneModelId;
                this.configObject.dataBind.sceneModelDeviceId = selectRowData.sceneModelDeviceId;
                this.configObject.dataBind.variableType = selectRowData.variableType;
                this.configObject.dataBind.productId = selectRowData.productId;
                this.configObject.dataBind.serialNumber = selectRowData.serialNumber;
                this.configObject.dataBind.identifier = selectRowData.identifier;
                this.configObject.dataBind.modelName = selectRowData.modelName;
            } else if (this.clickText == '单击') {
                // 用于下发指令
                this.configObject.dataEvent.sceneModelId = selectRowData.sceneModelId;
                this.configObject.dataEvent.variableType = selectRowData.variableType;
                this.configObject.dataEvent.productId = selectRowData.productId;
                this.configObject.dataEvent.serialNumber = selectRowData.serialNumber;
                this.configObject.dataEvent.slaveId = selectRowData.slaveId;
                this.configObject.dataEvent.identifier = selectRowData.identifier;
                this.configObject.dataEvent.modelName = selectRowData.modelName;
            } else if (this.clickText == '多参数绑定') {
                this.configObject.dataBind.sceneModelId = selectRowData[0].sceneModelId;
                this.configObject.dataBind.serialNumber = selectRowData[0].serialNumber;
                this.configObject.dataBind.productId = selectRowData[0].productId;
                this.configObject.dataBind.sceneModelDeviceIds = selectRowData.map((item) => item.sceneModelDeviceId);
                this.configObject.dataBind.identifiers = selectRowData.map((item) => item.identifier);
            }
        },
        // 自定义表格
        handleCustomTableSetting() {
            const { tableColumnList } = this.configObject.dataBind;
            const customTableData = [...this.customTableData];
            if (tableColumnList.length !== 0) {
                const list = customTableData.map((item) => {
                    const obj = tableColumnList.find((chil) => chil.columnName === item.columnName);
                    return { ...item, visible: obj ? true : false, color: obj ? obj.color : item.color };
                });
                this.customTableData = [...list];
            } else {
                this.customTableData = [...customTableData];
            }
            this.isCustomTableDialog = true;
        },
        handleCustomTableSubmit() {
            const customTableData = [...this.customTableData];
            const list = customTableData.filter((item) => item.visible);
            this.configObject.dataBind.tableColumnList = [...list];
            this.isCustomTableDialog = false;
        },
        // 省变化获取市
        handleProvinceChange(e) {
            this.cityList = this.provinceList.filter((item) => {
                return item.code === e;
            })[0].children;
            this.configObject.dataBind.cityCode = '';
            this.configObject.dataBind.districtCode = '';
            this.districtList = [];
        },
        // 市变化获取区
        handleCityChange(e) {
            this.districtList = this.cityList.filter((item) => item.code === e)[0].children;
            this.configObject.dataBind.districtCode = '';
        },
        // 区变化
        handleDistrictChange(e) {
            const { lat, lon } = this.districtList.find((item) => item.code === e) || {};
            this.configObject.dataBind.lat = lat;
            this.configObject.dataBind.lon = lon;
        },
        // http 编辑配置
        handleHttpSetting() {
            const { url, type, time, unit, params, body, headers } = this.configObject.dataBind.httpSetting || {};
            this.httpSetting = {
                ...this.httpSetting,
                url: url || '',
                type: type || 'get',
                time: time || 60,
                unit: unit || 's',
                paramsData: (params && Object.keys(params).length !== 0 && Object.keys(params).map((key) => ({ key: key, value: params[key] }))) || [{}],
                bodyType: body && Object.keys(body).length !== 0 && Object.keys(body).length !== 0 ? 2 : 1 || 1,
                bodyData: (body && Object.keys(body).length !== 0 && Object.keys(body).map((key) => ({ key: key, value: body[key] }))) || [{}],
                headerData: (headers && Object.keys(headers).length !== 0 && Object.keys(headers).map((key) => ({ key: key, value: headers[key] }))) || [{}],
            };
            this.isHttpSetting = true;
        },
        handleHttpRun() {
            const { url, type, headers, params, body } = this.configObject.dataBind.httpSetting;
            this.$modal.loading('正在加载，请稍候...');
            this.$request({
                url: url,
                method: type,
                headers: headers,
                params: params,
                data: body,
            })
                .then((res) => {
                    this.configObject.dataBind.echartData = JSON.stringify(JSON.parse(JSON.stringify(res)), null, '\t');
                    this.$modal.closeLoading();
                })
                .catch((err) => {
                    this.$modal.closeLoading();
                });
        },
        // 添加 params 参数
        handleAddHttpParams() {
            this.httpSetting.paramsData.push({});
        },
        handleDeleteHttpParams(index) {
            if (this.httpSetting.paramsData.length !== 1) {
                this.httpSetting.paramsData.splice(index, 1);
            }
        },
        // 添加 body 参数
        handleAddHttpBody() {
            this.httpSetting.bodyData.push({});
        },
        handleDeleteHttpBody(index) {
            if (this.httpSetting.bodyData.length !== 1) {
                this.httpSetting.bodyData.splice(index, 1);
            }
        },
        // body radio 切换
        handleHttpBodyRadioInput(val) {
            if ((this.httpSetting.bodyType = 1)) {
                this.httpSetting.bodyData = [{}];
            }
            this.httpSetting.bodyType = val;
        },
        // 添加 headers 参数
        handleAddHttpHeader() {
            this.httpSetting.headerData.push({});
        },
        handleDeleteHttpHeader(index) {
            if (this.httpSetting.headerData.length !== 1) {
                this.httpSetting.headerData.splice(index, 1);
            }
        },
        // 保存http数据
        handleSaveHttpSetting() {
            const { url, type, time, unit, paramsData, bodyData, headerData } = this.httpSetting;
            this.configObject.dataBind.httpSetting = {
                ...this.configObject.dataBind.httpSetting,
                url,
                type,
                time,
                unit,
                params: (paramsData[0].key && this.arrayToObject(paramsData)) || {},
                body: (bodyData[0].key && this.arrayToObject(bodyData)) || {},
                headers: (headerData[0].key && this.arrayToObject(headerData)) || {},
            };
            this.isHttpSetting = false;
        },
        // 数组转对象
        arrayToObject(list) {
            let obj = {};
            for (var i = 0; i < list.length; i++) {
                obj[list[i].key] = list[i].value;
            }
            return obj;
        },
        // 函数过滤器
        handleAddFilter() {
            const { filterRule, echartData, httpSetting } = this.configObject.dataBind;
            const { url, type, headers, params, body } = httpSetting;
            this.isFuncFilter = true;
            if (echartData) {
                this.filterOldData = echartData;
            } else {
                this.$request({
                    url: url,
                    method: type,
                    headers: headers,
                    params: params,
                    data: body,
                }).then((res) => {
                    this.configObject.dataBind.echartData = JSON.stringify(JSON.parse(JSON.stringify(res.data)), null, '\t');
                });
            }
            setTimeout(() => {
                if (filterRule) {
                    this.$refs.filterEditor.setValue(filterRule);
                } else {
                    this.$refs.filterEditor.setValue('return data');
                }
            }, 100);
        },
        // 过滤器编辑器变化
        handleFilterEditorChange(data) {
            let { echartData } = this.configObject.dataBind;
            echartData = JSON.parse(echartData);
            const funStr = 'function () {\n' + 'const data = echartData;' + '\n' + data + '\n' + '}';
            try {
                let fun = eval('(' + funStr + ')');
                this.filterNewData = fun();
            } catch (e) {
                this.filterNewData = e;
            }
            this.filterRule = data;
        },
        // 保存过滤器数据
        handleSaveFilterData() {
            this.configObject.dataBind.filterRule = this.filterRule;
            this.isFuncFilter = false;
        },
        // echart代码视图
        handleEchartClick() {
            this.isCodeViewDialog = true;
            this.$refs.monaco.setValue(this.configObject.dataBind.echartOption);
        },
        // monaco编辑器
        handleMonacoChange(data) {
            this.configObject.dataBind.echartOption = data;
        },
        // echart运行代码视图
        handleEchartRunClick() {
            this.configObject.dataBind.echartRun = new Date().getTime();
            this.isCodeViewDialog = false;
        },
        //变化日志
        changeLog(newVal) {
            // console.log('组件变化了',newVal);
            this.historyData.push(newVal);
        },
        // 增加滑动位置
        addTranslate() {
            let id = this.configObject.dataAction.translateList.length;
            console.log(this.configObject.dataAction.translateList);
            let state = {
                id: id + 1,
                direction: '',
                position: 0,
            };
            this.configObject.dataAction.translateList.push(state);
        },
        //删除滑动位置
        deleteTranslate() {
            let id = this.configObject.dataAction.translateList.length;
            this.configObject.dataAction.translateList.some((item, i) => {
                if (item.id == id) {
                    this.configObject.dataAction.translateList.splice(i, 1);
                    return true;
                }
            });
        },
        // 增加状态开关
        addSwitch() {
            let id = this.configObject.dataBind.stateList.length;
            let state = {
                id: id + 1,
                paramCondition: '',
                paramData: '',
                imageUrl: '',
            };
            this.configObject.dataBind.stateList.push(state);
        },
        deleteSwitch() {
            let id = this.configObject.dataBind.stateList.length;
            this.configObject.dataBind.stateList.some((item, i) => {
                if (item.id == id) {
                    this.configObject.dataBind.stateList.splice(i, 1);
                    return true;
                }
            });
        },
        // 获取绑定设备列表
        getBindDeviceList() {
            const { guid, type } = this.$route.query;
            const params = {
                scadaGuid: guid,
                scadaType: Number(type),
                pageNum: 1,
                pageSize: 9999,
            };
            listDeviceBind(params).then((res) => {
                if (res.code == 200) {
                    this.deviceBindList = res.rows;
                }
            });
        },
        // 获取3d模型
        getZtModel() {
            const params = {
                pageNum: 1,
                pageSize: 9999,
            };
            listModel(params).then((res) => {
                if (res.code === 200) {
                    this.ztModelOption = res.rows;
                }
            });
        },
        // 选择模型
        handleModelChange() {
            this.ztModelOption.forEach((element) => {
                if (element.imageUrl === this.configObject.imageUrl) {
                    this.configObject.modelUrl = element.modelUrl;
                }
            });
        },
        stack(val) {
            console.log('topoData', this.configObject);
            if (this.configObject) {
                let zIndex = 0;
                if (val == '置顶') {
                    zIndex = this.topoData.zIndexTop == undefined ? 0 : this.topoData.zIndexTop + 1;
                    this.topoData.zIndexTop = zIndex;
                } else if (val == '置底') {
                    zIndex = this.topoData.zIndexBottom == undefined ? 0 : this.topoData.zIndexBottom - 1;
                    this.topoData.zIndexBottom = zIndex;
                } else if (val == '上一层') {
                    zIndex = this.configObject.style.zIndex == undefined ? 1 : this.configObject.style.zIndex + 1;
                } else if (val == '下一层') {
                    zIndex = this.configObject.style.zIndex == undefined ? 1 : this.configObject.style.zIndex - 1;
                }
                for (var key in this.selectedComponentMap) {
                    var component = this.selectedComponentMap[key];
                    component.style.zIndex = zIndex;
                }
            }
        },
        // 选中组态
        selectZtPage() {
            this.ztOption.forEach((item) => {
                const { dataEvent } = this.configObject;
                if (item.guid === dataEvent.ztPage) {
                    const obj = {
                        ztId: item.id,
                        ztPageName: item.pageName,
                    };
                    this.configObject.dataEvent = { ...dataEvent, ...obj };
                }
            });
        },
        createCode() {
            var code = '';
            //设置长度，这里看需求，我这里设置了4
            var codeLength = 4;
            //设置随机字符
            var random = new Array(0, 1, 2, 3, 4, 5, 6, 7, 8, 9);
            //循环codeLength 我设置的4就是循环4次
            for (var i = 0; i < codeLength; i++) {
                //设置随机数范围,这设置为0 ~ 36
                var index = Math.floor(Math.random() * 9);
                //字符串拼接 将每次随机的字符 进行拼接
                code += random[index];
            }
            //将拼接好的字符串赋值给展示的code
            return code;
        },
        configClick(val) {
            if (val == '单击') {
                this.singleClickDialog = true;
            } else {
                this.animationDialog = true;
            }
            this.clickText = val;
        },
        // 点击设置提交
        singleClickSubmit() {
            this.singleClickDialog = false;
        },
        // 动画设置提交
        animationSubmit() {
            this.animationDialog = false;
        },
        // 图库选择
        handleGalleryClick(label) {
            this.imgProperty = label;
            this.isGalleryDialog = true;
        },
        selectImageClick() {
            let imgs = this.$refs.topoSelectImage.handleChoice();
            if (imgs.length === 0) {
                this.$message({
                    message: this.$t('scada.topo.editor.023345-36'),
                    type: 'warning',
                });
                return;
            } else {
                let selectImage = imgs[imgs.length - 1];
                if (this.imgProperty == '背景图片') {
                    this.topoData.layer.backgroundImage = this.baseApi + selectImage.resourceUrl;
                } else if (this.imgProperty == '图片路径') {
                    this.configObject.style.url = this.baseApi + selectImage.resourceUrl;
                } else if (this.imgProperty == '开关状态(关)') {
                    this.configObject.dataBind.shutImageUrl = this.baseApi + selectImage.resourceUrl;
                } else if (this.imgProperty == '开关状态(开)') {
                    this.configObject.dataBind.openImageUrl = this.baseApi + selectImage.resourceUrl;
                } else if (this.imgProperty == '开关状态(报警)') {
                    this.configObject.dataBind.warnImageUrl = this.baseApi + selectImage.resourceUrl;
                } else if (this.imgProperty.indexOf('状态开关') > -1) {
                    let id = this.imgProperty.split('-')[1];
                    this.configObject.dataBind.stateList.forEach((element) => {
                        if (element.id == id) {
                            element.imageUrl = this.baseApi + selectImage.resourceUrl;
                        }
                    });
                }
                this.isGalleryDialog = false;
                this.$refs.topoSelectImage.clearChoice(); //选完后清掉
            }
        },
        initPage(configData) {
            this.configData = configData;
        },
        changeTab(tabIndex) {
            this.tabIndex = tabIndex;
        },
        bindData(configObject, index, isLayer) {
            this.configObject = configObject;
            this.isLayer = isLayer;
            if (isLayer === false) {
            }
        },
        generateTargetComponentOptions() {
            var options = [];
            this.topoData.components.forEach((component) => {
                if (this.configObject.identifier != component.identifier) {
                    options.push({
                        label: component.name || component.type,
                        value: component.identifier,
                    });
                }
            });
            return options;
        },
        removeAction(index) {
            this.configObject.action.splice(index, 1);
        },
        addAction() {
            var action = {
                type: 'click',
                action: '开关控制',
                showItems: [],
                hideItems: [],
            };
            this.configObject.action.push(action);
        },
        // 鼠标进入angle变化
        mouseEnterAngle() {
            this.angleStyle = {
                opacity: 0.8,
            };
        },
        mouseLeaveAngle() {
            this.angleStyle = {
                opacity: 0.1,
            };
        },
        // angle旋转角度
        onAngle(angle) {
            // console.log('旋转角度：', angle);
            this.transform('自定义旋转角度', angle);
        },
        // 旋转
        transform(val, value) {
            if (this.configObject) {
                let transform = '';
                let transformType = '';
                if (val == '顺时针旋转') {
                    transform = this.configObject.style.transform + 90;
                    transformType = `rotate(` + transform + `deg)`;
                } else if (val == '逆时针旋转') {
                    transform = this.configObject.style.transform - 90;
                    transformType = `rotate(` + transform + `deg)`;
                } else if (val == '水平镜像') {
                    transform = 0;
                    transformType = `rotateY(180deg)`;
                } else if (val == '垂直镜像') {
                    transform = 0;
                    transformType = `rotateX(180deg)`;
                } else if (val == '自定义角度' && value) {
                    transform = this.configObject.style.transform + parseInt(value);
                    transformType = `rotate(` + transform + `deg)`;
                } else if (val == '自定义旋转角度' && value) {
                    transform = parseInt(value);
                    transformType = `rotate(` + transform + `deg)`;
                }
                for (var key in this.selectedComponentMap) {
                    var component = this.selectedComponentMap[key];
                    component.style.transform = transform;
                    component.style.transformType = transformType;
                }
            }
        },
        // 设置密码
        handleSetPassword() {
            this.compPassword = this.configObject.dataBind.password;
            this.isSetPasswordDialog = true;
        },
        handleSetPasswordSubmit() {
            this.configObject.dataBind.password = this.compPassword;
            this.isSetPasswordDialog = false;
        },
        // 选择图层
        handelLayerItemClick(index, item) {
            this.$emit('layerItemChange', { index, item });
        },
        // 图层拖拽选中
        handelLayerItemDraggableChoose(event) {
            const { oldIndex } = event;
            const item = this.topoData.components[oldIndex];
            this.$emit('layerItemChange', { index: oldIndex, item });
        },
        // 图层拖拽结束
        handelLayerItemDraggableEnd(event) {
            const { newIndex } = event;
            const item = this.topoData.components[newIndex];
            this.$emit('layerItemChange', { index: newIndex, item });
        },
        // 图层锁定/解锁
        handleLayerItemLock(item) {
            this.$set(item, 'isLock', !item.isLock);
            // 同步选中的组件工具栏中的状态
            if (this.selectedComponents.length === 1 && this.selectedComponents[0] === item.identifier) {
                this.$emit('lockStatusChange', item.isLock);
            }
        },
        // 图层显示/隐藏
        handleLayerItemHide(item) {
            this.$set(item.style, 'visible', !item.style.visible);
        },
        // 图层名称编辑
        handleLayerItemNameEdit(item) {
            this.$prompt(this.$t('topo.components.topoProperties.038495-370'), this.$t('topo.components.topoProperties.038495-371'), {
                cancelButtonText: this.$t('topo.components.topoProperties.038495-373'),
                confirmButtonText: this.$t('topo.components.topoProperties.038495-372'),
                inputValue: item.name,
                inputPattern: /^(?=.*\S).+$/,
                inputErrorMessage: this.$t('topo.components.topoProperties.038495-374'),
            }).then(({ value }) => {
                this.$set(item, 'name', value);
            });
        },
    },
};
</script>

<style lang="scss" scoped>
.topo-properties {
    width: 100%;
    height: 100%;
    border-left: 1px solid #dcdfe6;

    .tabs-wrap {
        height: 44px;
        display: flex;
        border-bottom: 1px solid #dcdfe6;

        .tab-item {
            flex: 1;
            height: 44px;
            text-align: center;
            line-height: 44px;
            color: #323232;
            font-size: 14px;
            font-weight: 500;
        }

        .tab-item:hover {
            cursor: pointer;
        }

        .tab-item-active {
            color: #486ff2;
            border-bottom: #486ff2 solid 2px;
        }
    }

    .table-wrap {
        overflow-x: hidden;
        overflow-y: auto;
        height: calc(100% - 44px);
        padding: 0 10px;

        .table-item {
            padding: 0;

            .collapse-wrap {
                border-top: unset;
                border-bottom: unset;

                ::v-deep .el-collapse-item__header {
                    font-size: 13px;
                    height: 44px;
                    line-height: 44px;
                }
            }

            .ixd-wrap {
                display: flex;
                flex-direction: row;
                justify-content: space-between;
                align-items: center;
                padding: 0 5px 0 10px;
                font-size: 13px;
            }

            .btn-tools-wrap {
                display: flex;
                flex-direction: row;
                align-items: center;
                justify-content: space-between;
                padding: 0 5px 0 10px;

                .name {
                    font-size: 12px;
                    color: #606266;
                }
            }

            .btn-tools-content-wrap {
                display: flex;
                flex-direction: row;
                align-items: center;
                margin-top: 10px;
                padding: 0 8px;

                .img-wrap {
                    width: 39px;
                    height: 32px;
                    line-height: 32px;
                    text-align: center;
                    margin-left: 5px;
                }

                .color-picker-wrap {
                    height: 32px;
                    width: 32px;
                    margin-left: 5px;
                }
            }

            .form-item-wrap {
                display: flex;
                flex-direction: row;
                align-items: center;
                margin-top: 5px;

                .name {
                    font-size: 12px;
                    color: #606266;
                }

                .content {
                    margin-left: 13px;
                    height: 32px;
                    line-height: 32px;
                }
            }

            .layer-box {
                padding: 10px 0;

                .layers-list-item {
                    display: flex;
                    flex-direction: row;
                    align-items: center;
                    padding: 10px 1px;
                    border-radius: 4px;
                    cursor: pointer;
                    user-select: none;

                    &:hover {
                        background-color: #edf1fe;
                        box-shadow: 0 0 8px 0 rgba(232, 237, 250, 0.6), 0 2px 4px 0 rgba(232, 237, 250, 0.5);
                    }

                    .img {
                        width: 30px;
                        height: 28px;
                        border-radius: 4px;
                        margin-left: 4px;
                    }

                    .name {
                        flex: 1;
                        display: inline-block;
                        padding: 0 10px;
                        font-size: 13px;
                        line-height: normal;
                        white-space: nowrap;
                        overflow: hidden;
                        text-overflow: ellipsis;
                    }

                    .tools {
                        width: 58px;
                        display: flex;
                        flex-direction: row;
                        justify-content: space-between;
                        font-size: 14px;
                        margin-right: 4px;
                    }
                }

                .is-active {
                    color: #486ff2;
                    background-color: #edf1fe;
                    box-shadow: 0 0 8px 0 rgba(232, 237, 250, 0.6), 0 2px 4px 0 rgba(232, 237, 250, 0.5);
                }

                .item-ghost {
                    background-color: #edf1fe;
                    box-shadow: 0 0 8px 0 rgba(232, 237, 250, 0.6), 0 2px 4px 0 rgba(232, 237, 250, 0.5);
                }
            }
        }
    }

    .bg-set-wrap {
        padding: 20px 10px;

        .bg-img-wrap {
            position: relative;
            background-color: #fbfdff;
            border: 1px dashed #c0ccda;
            border-radius: 6px;
            box-sizing: border-box;
            width: 100%;
            height: 128px;
            cursor: pointer;
            line-height: 126px;
            vertical-align: top;
            text-align: center;

            &:hover {
                border-color: #409eff;

                .img-tools {
                    opacity: 1;
                }
            }

            .ico-wrap {
                font-size: 26px;
                color: #8c939d;
            }

            .img-wrap {
                width: 100%;
                height: 100%;
                padding: 10px;
                background-size: cover;
            }

            .img-tools {
                position: absolute;
                width: 100%;
                height: 100%;
                left: 0;
                top: 0;
                cursor: default;
                text-align: center;
                color: #fff;
                font-size: 20px;
                background-color: rgba(0, 0, 0, 0.5);
                transition: opacity 0.3s;
                cursor: pointer;
                opacity: 0;

                i {
                    padding: 0 8px;
                }
            }
        }
    }

    ::v-deep .el-form-item {
        margin-bottom: 20px;

        .el-form-item__label {
            font-size: 13px;
        }
    }

    ::v-deep .el-form--label-top .el-form-item__label {
        padding: 0;
    }

    ::v-deep .el-input {
        font-size: 12px;
    }

    ::v-deep .el-checkbox__label {
        font-size: 12px;
    }

    ::v-deep .el-collapse-item__header {
        background-color: transparent;
        font-size: 12px;
        height: 42px;
        line-height: 42px;
    }

    ::v-deep .el-collapse-item__wrap {
        background-color: transparent;
        border-bottom: unset;
    }

    ::v-deep .el-radio__label {
        font-size: 12px;
    }

    ::v-deep .el-input-group__append {
        padding: 0 10px;
    }

    ::v-deep .el-input-group--prepend .el-input__inner {
        padding: 0 10px;
    }

    ::v-deep .el-form-item:last-child {
        margin-bottom: 0;
    }

    .input-with-select ::v-deep .el-input-group__prepend {
        background-color: #fff;
        padding: 0 10px;
        min-width: 75px;

        .el-select {
            margin: -10px;
        }
    }

    .setup-angle-wrap {
        position: fixed;
        top: 100px;
        right: 350px;
        height: 100px;
        width: 100px;
        z-index: 1000;
        background-color: transparent;
    }

    .json-view-wrap {
        height: 125px;
        overflow: auto;
        border-radius: 4px;
        border: 1px solid #dcdfe6;

        ::v-deep .jv-button {
            font-size: 12px;
            padding: 0;
        }
    }
}

.data-engine-dialog {
    .title-wrap {
        font-size: 16px;
        margin-bottom: 20px;
    }

    .action-wrap {
        margin-bottom: 15px;
    }
}

.box-message {
    padding: 20px;
    border: 1px solid #f4dfb6;
    background: #fffbf4;
    text-align: left;
    height: 400px;
    overflow-y: auto;
}
</style>
